Tutorial Aplikasi Web Dengan PHP dan MySQL

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya, setiap bahasa pemrograman yang digunakan dalam membuat aplikasi baik itu berbasis desktop, mobile, maupun wbiste, tidak lepas dari database, dimana database ini berfungsi sebagai wahana penyimpanan dan manipulasi data baik untuk ditampilkan pada aplikasi maupun untuk menyimpan inputan dari aplikasi. Berkaitan dengan hal tersebut, maka dalam pengembagan website, dibutuhkan sebuah server yang mana akan digunakan untuk menyimpan file-file website kita dan menyimpan database kita. Pada contoh aplikasi yang akan saya buat pada modul ini, saya menggunakan server local XAMPP. Jadi, file website yang saya buat tersimpan di Local (C):\xampp\htdocs\myweb\ Pada latihan membuat web dengan PHP dan MySQL ini, perlu diketahui bahwa, komponen bahasa atau script yang saya butuhkan adalah PHP, JavaScript, HTML, CSS serta Query MySQL. B. STUDI KASUS Pada modul ini, studi kasus yang saya angkat adalah membuat website sederhana dengan PHP dan MySQL, yaitu untuk suatu keperluan dan kebutuhan. Berikut tampilan Website yang akan saya buat dengan beberapa macam script yang telah saya sebutkan di atas.

Tampilan di atas adalah halaman Pertama web yang saya buat. Yaitu halaman HOME.

Ruslan Abdul Gani 2014/2015

1

Tutorial Aplikasi Web Dengan PHP dan MySQL

Desain di atas adalah halaman profil, isinya tergantung anda mau ngisi dengan apa nantinya saat dimodifikasi.

Desain di atas adalah sebuah desain yang membutuhkan penyimpanan database untuk mengirim komentar yang kita masukkan, untuk itu sebelum memulai praktikum, harus dibuat database beserta table-tablenya agar nantinya kita dapat langsung memprogramkan dengan PHP pada proses simpannya.

Ruslan Abdul Gani 2014/2015

2

Tutorial Aplikasi Web Dengan PHP dan MySQL

C. PRAKTIK Praktikum 1 Membuat kerangka Desain dengan bantuan CSS, Simpan file ini dengan nama file style.css dalam Polder website anda! #bungkus{ width: 980px; margin: 0px auto; box-shadow: 0px 0px 2px darkred; border: 1px solid appworkspace; } #header{ display: block; width: 960px; margin: 0px auto; background: #204060; color: #fff; padding:10px; } #header h1{ margin:10px; padding:5px; } #tengah{ margin:10px; } #menu{ height: 25px; padding: 0px; background: black; font-family: arial; font-size: 13px; } #menu ul{ margin:-5px 0px 0px -35px; list-style: none; } #menu ul li a{ text-decoration: none; color: white; float: left; margin-right: 0px; border-right:1px solid #f0f0f0; padding: 5px 10px 3px 10px; } Ruslan Abdul Gani 2014/2015

3

Tutorial Aplikasi Web Dengan PHP dan MySQL

#menu a:hover{ background: darkred; color: darkorange; } Praktikum 2 Mengimplementasikan file style.css di atas dengan kerangka dari HTML. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Ruslan Abdul Gani 2014/2015

4

Tutorial Aplikasi Web Dengan PHP dan MySQL

Simpan file di atas dengan nama file index.php Praktikum 3 Membuat file gostBook.php <script type="text/javascript"> function getInfoName(){ var id = document.getElementById("infoname").innerHTML = "What is name?"; } function getInfoEmail(){ var id = document.getElementById("infoemail").innerHTML = "What is email address?"; } <style type="text/css"> .input{ height: 30px; border:1px solid gray; background: white; } .input:hover{ background:#f0f0f0; border: 1px solid #abcdef; box-shadow: 0px 0px 2px #abcdef; } form{ font-family: arial; } textarea{ font-family: arial; resize:none; } .botton{ padding:5px 15px 5px 15px; background: #204060; color:white; cursor:pointer; } #block{ display: block; font-family: arial; font-size: 13px; padding:10px; border:1px solid #ABCDEF; margin:10px; width:500px; } #block p{ margin-top: 5px;

Ruslan Abdul Gani 2014/2015

5

your

your

Tutorial Aplikasi Web Dengan PHP dan MySQL } #block b{ float:left; color:#202040; font-size: 15px; } #block font{ float: right; }

Full Name

Email

Comentar

---

Goeskbook List (' . mysql_num_rows($ambil) . ')'); while ($hasil = mysql_fetch_array($ambil)) { $date = explode('-', $hasil['tanggal']); $tanggal = mktime(0, 0, 0, $date['1'], $date['2'], $date[0]);

Ruslan Abdul Gani 2014/2015

6

Tutorial Aplikasi Web Dengan PHP dan MySQL $tgl = date('d M Y', $tanggal); echo(''); } } ?>

Praktikum 4 1. Membuat Table dalam database CREATE TABLE `goesbook` ( `no_tamu` INT UNSIGNED ZEROFILL NOT NULL AUTO_INCREMENT, `nama` VARCHAR( 40 ) NOT NULL , `email` VARCHAR( 50 ) NOT NULL , `komentar` TEXT NOT NULL , `tanggal` DATE NOT NULL , PRIMARY KEY ( `no_tamu` )); Pastikan table tersebut sudah berjalan dengan baik,

Praktikum 5 Buat polder proses yang isinya adalah file send_guestBook.php
Ruslan Abdul Gani 2014/2015

7

Tutorial Aplikasi Web Dengan PHP dan MySQL $nama = $_POST['nama']; $email = $_POST['email']; $komentar = $_POST['komentar']; $tanggal = date('Y-m-d'); if(!empty($nama) and !empty($email) and !empty($komentar)){ //jika tidak kosong, maka masukkan data ke dalam //tabel goesbook dengan query di bawah ini $insert = mysql_query("insert into goesbook (nama, email, komentar, tanggal) values('$nama','$email','$komentar','$tanggal')") or die(mysql_error()); if($insert){ //meloncat ke halaman index.php?page=guest header('location:../index.php?page=guest'); } } else{ //jika ada salah satu field yang kosong! echo('<script>alert("Maaf, semua fiel hasil diisi!");self.history.back();'); } ?>

IMPLEMENTASI APLIKASI

Tampilan sebelum di isi komentar…..

Ruslan Abdul Gani 2014/2015

8

Tutorial Aplikasi Web Dengan PHP dan MySQL

Setelah di isi dan tekan tombol send, maka tampilan akan seperti berikut ini:

Ruslan Abdul Gani 2014/2015

9

Tutorial Aplikasi Web Dengan PHP dan MySQL

D. PESAN DAN KESAN Pesan: Jangan menyerah dalam melakukan suatu hal, karena anda tidak akan pernah gagal selama anda tidak menyerah, dan jangan takut mencoba hal baru, karena anda tidak akan berhasil jika takut untuk mencoba,,,

Ruslan Abdul Gani 2014/2015

10