Senin, 15 Agustus 2016

Menampilkan Data dari Database ke Halaman Web Menggunakan PHP MySQL

Praktek 5 Menampilkan Data dari Database ke Halaman Web Menggunakan PHP MySQL

PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP diciptakan oleh Rasmus Lerdorf pertama kali tahun 1994. Pada awalnya PHP adalah sinngkatan dari "Personal Home Page Tools". Selanjutnya diganti menjadi FI ("Forms Interpreter"). Sejak versi 3.0, nama bahasa ini diubah menjadi "PHP: Hypertext Prepocessor" dengan singkatannya "PHP". PHP versi terbaru adalah versi ke-5. Berdasarkan survey Netcraft pada bulan Desember 1999, lebih dari sejuta site menggunakan PHP, di antaranya adalah NASA, Mitsubishi, dan RedHat.

Berikut langkah-langkah menampilkan data dari database ke halaman web menggunakan PHP MySQL.

Pertama download dahulu aplikasi xampp:
xampp-win32-1.7.2
xampp-win32-5.5.35-0-VC11-installer

Atau ke situs resminya Xampp untuk  mendownload aplikasi Xampp jika tidak kompatibel dengan PC anda.

Setelah didownload dan diinstal buka xampp lalu klik tombol Start pada Apache dan MySQL. Jika sudah di-start tampilannya akan seperti di bawah ini. Lalu minimize aplikasi xampp.

Buka browser, lalu ketikkan localhost/phpmyadmin pada address bar. Tekan Enter.

Klik Databases. Lalu pada Create database isi nama database yang ingin kita buat tapi jangan dispasi agar tidak terjadi kesalahan pemanggilan nama database pada saat membuat script php (di sini saya menggunakan tanda underscore _ ). Lalu klik Create.

Pada Create table di bagian Name isikan nama tabel di sini saya membuat tabel mahasiswa, dan pada Number of Columns saya isikan dua (2). Klik Go.

Pada tabel mahasiswa kita buat npm dan nama. 
Type INT adalah untuk data yang akan diinput berupa bilangan bulat. 
Type VARCHAR adalah untuk data yang akan diinput berupa karakter (berupa huruf).
Pada Length/Values adalah untuk jumlah batasan karakter yang akan diinput.
Untuk npm pada Index-nya dibuat menjadi PRIMARY karena npm merupakan karakter unik (berbeda) dengan data yang lain.
Pada npm A_I (Auto Increment) dicentang. Gunanya untuk mengurutkan data yang akan dimaksudkan (npm yang diinput akan berurutan nantinya).
Tampilannya seperti contoh di bawah. Jika sudah klik Save.



Klik Database: database_ti untuk membuat tabel baru.


Buat tabel dosen.

Buat seperti di bawah ini. Klik Save.

Kembali lagi ke database_ti dan buat tabel matkul.


Buat seperti tampilan di bawah. Jika sudah klik Save.

Sekarang kita akan memasukkan data-data ke field pada masing-masing tabel yang telah kita buat tadi. Klik pada tabel mahasiswa yang ada pada kiri layar. Lalu klik Insert.


Contohnya pada npm di bagian value isikan 201455009. Dan pada nama isikan Janseb Sulo Sattuan. Jika sudah klik Go.

Masukkan lagi data-data pada tabel mahasiswa sesuai dengan keinginan. Contohnya jika sudah tampilannya akan seperti di bawah ini.

Lalu kita akan membuat script php yang akan menampilkan data yang kita buat di tabel mahasiswa tadi di browser. Pertama buka folder tempat di mana xampp diinstal di sini saya install-nya default. Buka My Computer, buka Local Disk (C:) lalu buka folder xampp, buka htdocs. Kemudian buat folder baru.

Sesuaikan nama foldernya dengan database-nya. Di sini nama database saya adalah database_ti.

Buka aplikasi Sublime Text. Lalu ketikkan script seperti di bawah ini.

<?php 

$hostname = "localhost";
$username = "root";
$password = "";
$db    ="data_ti";

$koneksi = mysql_connect($hostname, $username, $password) or die (mysql_error());

mysql_select_db($db, $koneksi) or die(mysql_error());

$tabel_dosen = mysql_query("SELECT * FROM tabel_dosen", $koneksi) or die(mysql_error());


 ?>

 <html>
 <head>
  <title>Database TI</title>
 </head>
 <body>
  <h2>Data TI</h2>
  <?php
  while ($row=mysql_fetch_array($tabel_dosen)) {
   echo 'NIDN: '.$row['nidn'].'<br>';
   echo 'Nama Dosen : '.$row['nama'].'<br>';
   echo 'Alamat : '.$row['alamat'].'<br>';
   echo '<hr>';
  }
  ?>
 </body>
 </html>

Screenshotnya seperti di bawah ini.

Yang digaris bawahi (mahasiswa) adalah isi tabel yang akan kita panggil di browser.

Lalu klik File, lalu klik Save As untuk menyimpan file.

Simpan di folder database yang telah kita buat tadi di folder xampp>htdocs>database_ti. Namanya samakan dengan databasenya. Gunakan ekstensi .php. Klik Save untuk menyimpan.

Jika sudah disimpan akan seperti di bawah ini.

Buka browser lalu ketikkan localhost/database_ti pada address bar. Lalu tekan ENTER.

Akan muncul tampilannya seperti di bawah ini. Lalu klik database_ti.php 

Jika berhasil tampilannya akan seperti di bawah ini.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Menggunakan style CSS pada HTML

Praktek 4 Menggunakan style CSS pada HTML

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Awalnya, CSS dikembangkan di SGML pada tahun 1970, dan terus dikembangkan hingga saat ini. CSS telah mendukung banyak bahasa markup seperti HTML, XHTML, XML, SVG (Scalable Vector Graphics) dan Mozilla XUL (XML User Interface Language).
Pada desember 1996, W3C memperkenalkan Level 1 spesifikasi CSS atau juga dikenal CSS1 yang mendukung format, warna font teks, dan lain-lain. Kemudian, Mei 1998, W3C menerbitkan CSS2 yang di dalamnya diatur fungsi peletakan elemen. Dan sekarang, W3C telah memperbaiki dan meningkatkan Kemampuan CSS2 ke  CSS3.

CSS digunakan oleh web programmer dan juga blogger untuk menentukan warna, tata letak font, dan semua aspek lain dari presentasi dokumen di situs mereka. Saat ini, hampir tidak ada situs web yang dibangun tanpa kode CSS.

Cascading Style Sheet terdiri dari Selektor, deklarasi, Properti dan Nilai. Seperti pada HTML, PHP dan bahasa pemrograman lainnya, CSS juga memiliki aturan yang menulis itu sendiri.
Contoh penulisan kode css :
Body {background-color: white;}

‘Body’ adalah Selektor, ‘{ }’ adalah deklarasi, ‘background-color’ adalah properti dan ‘white’ adalah nilai. Maksud dari kode diatas adalah mengatur warna latar belakang (background color) dari tag ‘Body’ sebuah halaman web.

Berikut langkah-langkah membuat CSS pada HTML, pertama ketikkan tag seperti di bawah ini:

<html>
        <title>Buat Website</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <body>
        <header>
            <h1>Buat Website</h1>
        </header>
        <menu>
            <a href="index.html">Home</a>
            <a href="profil.html">Profil</a>
            <a href="#">Produk</a>
            <a href="#">Kontak</a>
        </menu>
        <article>
            <h1>Judul Artikel</h1>
            <img src="images/2.jpg">
            <p>Pengertian internet (interconnection
            networking) sendiri adalah jaringan komunikasi
            global yang terbuka dan menghubungkan jutaan 
            bahkan milyaran jaringan komputer dengan 
            berbagai tipe dan jenis, dengan menggunakan 
            tipe komunikasi seperti telepon, satelit dan
            lain sebagainya.</p>
            <p>Pengertian internet (interconnection
            networking) sendiri adalah jaringan komunikasi
            global yang terbuka dan menghubungkan jutaan 
            bahkan milyaran jaringan komputer dengan 
            berbagai tipe dan jenis, dengan menggunakan 
            tipe komunikasi seperti telepon, satelit dan
            lain sebagainya.</p>
        </article>
        <footer>
            <p>Copyright &copy; 2016</p>
        </footer>
    </body>
</html>

Screenshotnya seperti di bawah ini:

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Di sini saya memberi nama index.html. Setelah itu klik Save untuk menyimpan.

Lalu buat folder baru di tempat kita menyimpan file html tadi. Caranya klik kanan, lalu klik New, lalu klik Folder.

Beri nama images pada folder baru tersebut.

Lalu masukkan gambar sesuai dengan yang anda kehendaki pada folder images dengan syarat namanya harus sama dengan yang telah anda ketik pada file html tadi. Di sini gambar yang saya gunakan formatnya memiliki ukuran lebar dan tingginya 200pixels x 138pixels.

Lalu buat file baru, dengan cara klik menu File kemudian klik New File.

Ketikkan seperti di bawah ini.

*{padding: 0; margin: 0;}
body{background: #27ae60}
header{background: #3498db; width: 800px; margin: auto; padding: 25px; color: yellow;}
menu{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
menu a{color: white; text-decoration: none; margin: 0 20px 0 0;} 
menu a:hover{text-decoration: underline}
article{background: #95a5a6; width: 800px; margin: auto; padding: 25px;}
article img{float: left; margin: 10px 10px 10px 0;}
article p{line-height: 20px; margin: 0 0 10px 0;}
footer{background: #2c3e50; width: 800px; margin: auto; padding: 25px;}
footer p{color: white;}

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di folder yang sama dengan file html tadi. Di sini saya menyimpan dengan nama style.css. Setelah itu klik Save untuk menyimpan.

Disimpan dengan nama style.css karena mengikuti apa yang kita ketik pada file html tadi.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi. Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak tampilan web di bawah ini terlihat lebih rapi dan nyaman dilihat. 

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Frame

Praktek 3.7 Membuat Frame

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.

Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isi dokumen
Membuat suatu dokumen tanya jawab, dll.
Ketikkan tag seperti di bawah ini.

<html>
<frameset rows=100,*>
<noframes>
 Maaf hanya bisa tampil pada browser yang mendukung frame
</noframes>
<frame src="Praktek 3.1.html">
<frame src="Praktek 3.2.html">
</frameset>
</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul 2 frame html berbeda pada tampilan di bawah ini. Frame atas diambil dari Praktek 3.1.html dan frame yang di bawah diambil dari Praktek 3.2.html. Dua frame berbeda ini diambil dari file ber-ekstensi html berbeda nama yang berada 1 folder dengan file 3.7.html.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Text Area

Praktek 3.6 Membuat Text Area

Tag textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS. 
Contoh: 
<textarea rows="5" cols="20"> 
  Text yang diisi dapat mencapai banyak baris 
</textarea> 

Elemen yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.
Ketikkan tag seperti di bawah ini.

<html>
<body>
<h1>Contoh TextArea</h1>

Alamat Lengkap : <br>
<textarea name="textarea" id="textarea" cols="45"
rows="5"></textarea>

</body>
</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.

Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul text area dan dapat menginput text atau karakter ke dalam text area tersebut.

Sekian dan terima kasih semoga bermanfaat bagi pembaca.

Membuat Select Option

Praktek 3.5 Membuat Select Option

Tag select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya dapat memilih dari 
nilai yang ada. Tag select digunakan bersama-sama dengan tag option untuk membuat box pilihan. 
Contoh: 
<select> 
    <option>Pilihan 1</option> 
    <option>Pilihan 2</option> 
    <option value="pilihan ketiga">Pilihan 3</option> 
</select> 
Ketika form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan. Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan form.
Ketikkan tag seperti di bawah ini.
 <html>
<body>
<h1>Contoh Select dan Option</h1>

Agama : <select size="1" name="agama">
    <option>Pilih Agama</option>
    <option>Islam</option>
    <option>Buddha</option>
    <option>Hindu</option>
    <option>Kristen</option>
    </select>

</body>
</html>

Screenshotnya seperti di bawah ini.

Lalu simpan dengan cara klik menu File, lalu klik Save As.

Simpan di drive dan folder yang anda kehendaki. Ketik nama file yang ingin anda simpan sesuai keinginan anda, tapi simpan dengan tambahan ekstensi .html. Setelah itu klik Save untuk menyimpan.

Buka file yang telah anda simpan tadi dengan cara double klik pada file di mana tempat anda menyimpan file tadi.


Akan muncul aplikasi browser dan tampilannya seperti di bawah ini. Tampak muncul drop down menu.

Sekian dan terima kasih. Semoga bermanfaat bagi pembaca.