Pembuatan Website e-learning Versi Mobile
3.7. Pembuatan Website e-learning Versi Mobile
Di dalam pembuatan website e-learning versi mobile ini menggunakan Dreamwevaer dan webserver. Adapun langkah-langka dalam pembuatan website e-learning meliputi beberapa proses :
3.7.1. Penginstalan Openwave Simulator
Openwave Simulator 7.0 adalah sebuah aplikasi berbasis Windows yang dapat digunakan untuk menguji bagaimana aplikasi mobile bekerja dengan Openwave mobile browser yang tertanam pada ponsel asli.
Openwave Simulator 7.0 berisi tentang file konfigurasi, telepon dan dapat menampilkan content dan disampaikan kedalam beberapa format termasuk XHTML Mobile Profile 1.0 (XHTML-MP) dengan Casding Style Sheets (CSS) dan Wireless Markup Language (WML). Adapun cara penginstalan sebagai berikut :
a. Menjalankan file setup.
Gambar 3.84 Tampilan setup Openwave Simulator
b. Mengikuti perintah I agree>Next
Gambar 3.85 Tampilan setup Openwave Simulator
c. Memiilih lokasi tujuan penginstalan.
Gambar 3.86 Tampilan setup Openwave Simulator
d. Kemudian menginstal.
Gambar 3.87 Tampilan setup Openwave Simulator
3.7.2. Pembuatan Layout Awal
Pada proses pembuatan desain untuk keperluan halaman pembuka pada mobile , terdapat berbagai macam cara pembuatannya. Pembuatan desain suatu gambar dapat berbagai program misalnya Adobe Photoshop yang merupakan software pengolah gambar raster. Dengan semakin banyaknya pilihan aplikasi yang telah tersedia akan lebih memudahkan pemakai pengguna untuk membuat gambar desain serta memanipulasi sesuai dengan kemampuan yang dimiliki. Dalam hal pembuatan desain layout awal halaman pembuka menggunakan software Dreamweaver.
3.7.2.1. Pembuatan Layout Header
a. Membuat File PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver. <div align="center" style="background:#000000">
<img src="../images/mbanner.png" width="125" height="20" /><br /> <a href="index.php">Home</a> <a href="index.php?page=tutorial">Tutorial</a> <a
href="index.php?page=about">About</a></div>
Gambar 3.88 Tampilan layout header pada Dreamweaver
c. Kemudian menyimpan file dengan nama Header.php
3.7.2.2. Pembuatan Layout Isi
a. Membuat File PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver. <?php
include "../include/sqlconfig.php"; $iclpage = $_GET['page'];
switch ($iclpage) {
default: $iclpage = "home.php"; $title = "Home"; break;
case "tutorial": $iclpage = "category.php"; $title .= " Tutorial"; break;
case "about": $iclpage = "../about.php"; $title .= "About"; break;
case "contact": $iclpage = "../contact.php"; $title = "Contact"; break;
case "desktop":
$iclpage = "desktop.php"; $title = "Desktop"; break;
<?php echo $title."<br />"; ?> <?php include $iclpage; ?>
Gambar 3.89 Tampilan script layout isi pada Dreamweaver
c. Kemudian menyimpan file dengan nama Index2.php
3.7.2.3. Pembuatan Layout Footer
a. Membuat File PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver. <div align="center" style="background:#000000"><a href="index.php">Home</a> <a
href="index.php?page=tutorial">Tutorial</a> <a href="index.php?page=contact">Contact</a> <p><a href="index.php?page=desktop">View Desktop Version</a></p> <p>Copyright © <?php echo date("Y"); ?></p> </div>
Gambar 3.90 Tampilan script layout footer pada Dreamweaver
c. Kemudian menyimpan file dengan nama Footer.php
3.7.3. Menggambungkan layout
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>e-Flash</title> <style type="text/css"> <!-- body {
background-color: #333333; margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
} body,td,th {
color: #FFFFFF; font-size: 9px;
} a{
font-size: 9px; color: #FF0000;
} a:visited {
color: #FF0000;
} a:hover {
color: #990000;
} a:active {
color: #FF0000;
} --> </style></head>
<body> <?php include "header.php"; include "index2.php"; include "footer.php"; ?> </body> </html>
Gambar 3.91 Tampilan script penggabungan layout pada Dreamweaver
c. Kemudian menyimpan file dengan nama Index.php
3.7.4. Pembuatan Isi Halaman
Isi halaman website e-elearning versi mobile ini berisi tentang berbagai macam penjelasan yang sesuai dengan fungsinya. Dalam website e-elearning ini terdapat beberapa macam halaman yaitu :
- HOME (Halaman Utama) - TUTORIAL - ABOUT - CONTACT
Adapun langkah-langkah pembuatan halaman sebagai berikut :
3.7.4.1. Pembuatan Halaman Home
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver.
Gambar 3.92 Tampilan script home pada Dreamweaver
c. Kemudian menyimpan file dengan nama home.php
3.7.4.2. Pembuatan Halaman Tutorial
Halaman tutorial ini berfungsi sebagai penjelasan tutorial tentang Flash yang berupa text tutorial. Didalam tutorial ini terdapat beberapa sub halaman yaitu
3.7.4.2.1. Pembuatan Kategori Tutorial
a. Membuat file PHP baru. File>New>Dynamic page>PHP a. Membuat file PHP baru. File>New>Dynamic page>PHP
$category = $_GET['category']; $action = $_GET['action']; $page = $_GET['page']; if($action=="detail") include "detail.php";
switch($category) {
default: categoryList(); break;
case "basic" && "design" && "animation" && "actionscript" && "game" && "other":
include "browse.php"; break;
} function categoryList(){
global $page; ?> <font size="+2"><b>Pilih Kategori</b></font> <p align="center"><a href="?page=<?php echo $page; ?>&category=basic">Flash - Basic</a></p> <p align="center"><a href="?page=<?php echo $page; ?>&category=design">Flash - Design</a></p> <p align="center"><a href="?page=<?php echo $page; ?>&category=animation">Flash - Animation</a></p> <p align="center"><a href="?page=<?php echo $page; ?>&category=actionscript">Flash - ActionScript</a></p> <p align="center"><a href="?page=<?php echo $page; ?>&category=game">Flash - Game</a></p> <p align="center"><a href="?page=<?php echo $page; ?>&category=other">Flash - Other</a></p>
<?php } ?>
Gambar 3.93 Tampilan script tutorial pada Dreamweaver
c. Kemudian menyimpan file dengan nama category.php.
3.7.4.2.2. Pembuatan Halaman Daftar Tutorial
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script HTML kedalam kode editor Dreamweaver. <?php
$key = $_GET['keyword']; $category = $_GET['category']; $action = $_GET['action']; if($action=="")
$dataPerPage = 5;
else $dataPerPage = 2; if(isset($_GET['pagenum']))
$pageNum = $_GET['pagenum']; else $pageNum = 1; $offset = ($pageNum - 1) * $dataPerPage; $query = "SELECT * FROM $page WHERE judul LIKE '%$key%' AND kategori LIKE '%$category%' AND id != '$id'"; $query_limit = sprintf("%s LIMIT %d, %d", $query, $offset, $dataPerPage); $result = mysql_query($query_limit) or die(mysql_error()); if($action==""){
<form id="search" name="search" method="get" action="">
<input name="page" type="hidden" id="page" value="<?php echo $_GET['page']; ?>"
/> <input name="category" type="hidden" id="category" value="<?php echo $_GET['category']; ?>" />
<table border="0" align="center"> <tr> <td>Pencarian Judul :</td> </tr> <tr>
<td><input name="keyword" type="text" id="keyword" value="<?php echo $key; ?>" size="30" /></td> </tr> <tr>
<td><input type="submit" value="Cari" /> <input type="button" value="Reset"
onclick="document.forms['search'].keyword.value = '';" /></td> </tr> </table> </form> <?php } else echo "<p> </p><p><hr />Tutorial lain: <p>"; ?> <p> </p> <table width="100%" cellpadding="0" cellspacing="0">
<?php while ($data = mysql_fetch_array($result)) { if($page == "tutorial") $content=$data['content']; else $content=$data['deskripsi']; $maxWords = 20; $piece = explode(" ", $content); $word = 0; $summary = ""; while($word<$maxWords){
$summary .= $piece[$word]." "; $word++;
} ?> <tr> <td background="../images/container_bg2.png"> </td> </tr> <tr>
<td width="94%" background="../images/container_bg2.png"><p><font size="3"><b><a href="?page=<? echo $page; ?>&category=<? echo $category; ?>&action=detail&id=<? echo $data['id']; ?>"><?php echo $data['judul']; ?></a></b></font></p>
<p><?php echo $summary; ?> ...(<a href="?page=<? echo $page; ?>&category=<? echo $category; ?>&action=detail&id=<? echo $data['id']; ?>">selengkapnya</a>)</p></td>
</tr> <tr>
<td background="../images/container_bg2.png"> </td> </tr>
<tr> <td> </td> </tr> <?php }; ?>
</table> <p>
<?php $query = "SELECT COUNT(*) AS numrows FROM $page WHERE judul LIKE '%$key%' AND kategori LIKE '%$category%' AND id != '$id'"; $result = mysql_query($query) or die(mysql_error()); $row = mysql_fetch_array($result, MYSQL_ASSOC); $numrows = $row['numrows']; $maxPage = ceil($numrows/$dataPerPage); $self = $_SERVER['PHP_SELF']; $nav = ''; for($pg = 1; $pg <= $maxPage; $pg++) {
if ($pg == $pageNum) $nav .= "$pg"; else $nav .= " <a href=\"$self?page=$page&category=$category&action=$action&id=$id&pagenum=$ pg&keyword=$key\">$pg</a> ";
} echo "<p align='right'>".$nav." </p>"; ?> </p> <p> </p>
Gambar 3.94 Tampilan script daftar tutorial pada Dreamweaver
c. Kemudian menyimpan file dengan nama browse.php.
3.7.4.2.3. Pembuatan Halaman Detail Tutorial
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script HTML kedalam kode editor Dreamweaver. <?php
$id = $_GET['id']; if(isset($_GET['pagenum']))
$pageNum = $_GET['pagenum']; else $pageNum = 1; $submit = $_POST['submit']; if($submit=="Kirim"){
$name = $_POST['name']; $email = $_POST['email']; $comment = htmlentities($_POST['comment']); if (!empty($name) && !empty($email) && !empty($comment)){
$date = date("d/m/Y G:i:s"); $query = "INSERT INTO video_comment(id_video, tanggal, nama, email,
comment) VALUES('$id', '$date','$name','$email','$comment')"; $result = mysql_query($query) or die(mysql_error()); if ($result) echo "Komentar berhasil dikirim"; else echo "Komentar gagal dikirim";
} else echo "Data yang akan dikirim tidak lengkap";
} $query = "SELECT * FROM $page WHERE id='$id'"; $result = mysql_query($query) or die(mysql_error()); $data =mysql_fetch_array($result);
?> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="94%" background="../images/container_bg2.png"><div align="right"><a href="printview.php?id=<?php echo $id; ?>" target="_blank">Print View</a></div>
<h5>Kategori = <?php echo $data['kategori']; ?></h5></td> </tr> <tr>
<td background="../images/container_bg2.png"> </td> </tr> <tr>
<td background="../images/container_bg2.png"><h5><?php echo $data['judul']; ?></h5></td> </tr> <tr>
<td background="../images/container_bg2.png"> </td>
</tr> <tr>
<td background="../images/container_bg2.png"> <?php if($page=="tutorial") echo content($data['content'], $pageNum); ?> </td> </tr> <tr>
<td background="../images/container_bg2.png"> </td> </tr> </table>
<p> <?php
function content($text, $pageNum){ global $page; global $category; global $action; global $id; $piece = explode("<!-- pagebreak -->", $text); $totalPage = count($piece); $nav = ""; for($pg = 1; $pg <= $totalPage; $pg++){
if ($pg == $pageNum) $nav .= "$pg"; else $nav .= " <a
href=\"$self?page=$page&category=$category&action=$action&id=$id&pagenum=$ pg\">$pg</a> "; } $output = $piece[$pageNum-1]; $output .= "<p align='right'>Halaman ".$nav." </p>"; return $output;
</p>
Gambar 3.95 Tampilan script detail tutorial pada Dreamweaver
c. Kemudian menyimpan file dengan nama detail.php.