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
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
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
#menu a:hover{ background: darkred; color: darkorange; Tutorial Aplikasi Web Dengan PHP dan MySQL Praktikum 2 Mengimplementasikan file style.css di atas dengan kerangka dari HTML. <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title><? echo date("d M Y");?></title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="bungkus"> <div id="header"> <h1>aplikasi Web<br/>Dengan PHP dan MySQL</h1> </div> <div id="menu"> <ul> <li><a href="index.php">beranda</a></li> <li><a href="index.php?page=profil">profil</a></li> <li><a href="index.php?page=about">about Us</a></li> <li><a href="index.php?page=contact">contact</a></li> <li><a href="index.php?page=guest">guest Book</a></li> </ul> </div> <div id="tengah"> <?php error_reporting(e_all ^ (E_NOTICE E_WARNING)); $page = $_GET['page']; switch ($page){ case 'guest': echo('<h1>this Goest Book Page</h1>'); include 'goestbook.php';break; case 'profil': echo('<h1>this Profile Page</h1>');break; case 'contact': echo('<h1>this Contact Page</h1>');break; case 'abaout': echo('<h1>this About Page</h1>');break; default: echo('<h1>welcome to My Web Application!</h1>');break;?> </div> <div id="header"> <center> <? echo('copyright RuslanLancs '. date('y'). '');?> </center> </div> </div> Ruslan Abdul Gani 2014/2015 4
</body> </html> Simpan file di atas dengan nama file index.php Tutorial Aplikasi Web Dengan PHP dan MySQL Praktikum 3 Membuat file gostbook.php <script type="text/javascript"> function getinfoname(){ var id = document.getelementbyid("infoname").innerhtml = "What is your name?"; function getinfoemail(){ var id = document.getelementbyid("infoemail").innerhtml = "What is your email address?"; </script> <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
#block b{ float:left; color:#202040; font-size: 15px; #block font{ float: right; </style> <form action="proses/send_guestbook.php" method="post" > Full Name<br> <input type="text" name="nama" id="name" class="input" onmouseout="document.getelementbyid('infoname').innerhtml = '';" size="40" onclick="getinfoname()" size="30" required /> <div id="infoname" style="color:red;"></div> <br> Email<br> <input type="text" name="email" id="mail" class="input" onmouseout="document.getelementbyid('infoemail').innerhtml = '';" size="45" onclick="getinfoemail()" required/> <div id="infoemail" style="color:red;"></div> <br> Comentar<br> <textarea name="komentar" id="coment" rows="4" cols="50" placeholder="write your coment here!" required></textarea><br> <input type="submit" value="send" class="botton"/> <input type="reset" value="cancel" class="botton"/><br/><br/> <hr/> </form> <?php //menampikan data gostbook yang sudah tersimpan $server = 'localhost'; $username = 'root'; $password = ''; $dbname = 'webku'; //nama database //jika pakek password silahkan masukkan password sernernya... //koneksi ke database mysql_connect($server, $username, $password) or die(mysql_errno()); mysql_select_db($dbname) or die(mysql_error()); //mengambil data goesbook sebanyak 10 record ke dalam database $ambil = mysql_query('select * from goesbook order by no_tamu desc limit 10') or die(mysql_error()); if (mysql_num_rows($ambil)!= 0) { echo('<h1>goeskbook List ('. mysql_num_rows($ambil). ')</h1>'); 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('<div id="block"> <b>'. $hasil['nama']. '</b>, <font>'. $tgl. '</font><br/> <p align=justify>'. $hasil['komentar']. '</p> </div>'); 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 <?php //mengatasi error variable yang kosong error_reporting(e_all ^ (E_NOTICE E_WARNING)); //buat koneksi ke database $server = 'localhost'; $username = 'root'; $password = ''; $dbname = 'webku'; //nama database //jika pakek password silahkan masukkan password sernernya... //koneksi ke database mysql_connect($server, $username, $password) or die(mysql_errno()); mysql_select_db($dbname) or die(mysql_error()); Ruslan Abdul Gani 2014/2015 7
$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();</script>');?> IMPLEMENTASI APLIKASI Tampilan sebelum di isi komentar.. Ruslan Abdul Gani 2014/2015 8
Setelah di isi dan tekan tombol send, maka tampilan akan seperti berikut ini: Ruslan Abdul Gani 2014/2015 9
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