Pembuatan Website e-learning Versi Desktop
3.6. Pembuatan Website e-learning Versi Desktop
Di dalam pembuatan website e-learning in menggunakan Dreamweaver dan web server. Adapun langkah-langka dalam pembuatan website e-learning meliputi beberapa proses :
3.6.1. Penginstalan Web Server
Web Server berguna untuk melayani dan memfungsikan situs web. Dalam pembuatan web e-learning ini menggunakan web server Apache yang dapat dijalankan pada banyak sistem operasi (Unix, BSD, Linux, Microsoft windows dan Novell Netware serta Platform lainnya). Adapun cara penginstalan sebagai berikut : Web Server berguna untuk melayani dan memfungsikan situs web. Dalam pembuatan web e-learning ini menggunakan web server Apache yang dapat dijalankan pada banyak sistem operasi (Unix, BSD, Linux, Microsoft windows dan Novell Netware serta Platform lainnya). Adapun cara penginstalan sebagai berikut :
Gambar 3.31 Tampilan penginstalan Apache Server
Gambar 3.32 Tampilan penginstalan Apache Server
b. Memilih lokasi penyimpanan web server.
Gambar 3.33 Tampilan penginstalan Apache Server
Gambar 3.34 Tampilan penginstalan Apache Server
c. Memasukan nama server yang dikehendaki.
Gambar 3.35 Tampilan penginstalan Apache Server
d. Memasukan pasword server.
Gambar 3.36 Tampilan penginstalan Apache Server
Gambar 3.37 Tampilan penginstalan Apache Server
Gambar 3.38 Tampilan penginstalan Apache Server
3.6.2. Pendefinisian Situs Pada Dreamweaver
Sebelum membuat situs web agar lebih mudah langkah pertama yaitu mendefenisikan situs kedalam Dreamweaver. Berikut ini langkah-langkah untuk melakukan pendefinisian situs pada Dreamweaver :
Gambar 3.39 Tampilan Awal Dreamweaver
a. Pada menu toolbar Menekan tombol Site > New Site, kemudian akan muncul kotak dialog Site Definition.
Gambar 3.40 Tampilan Site Definition Dreamweaver
b. Pada jendela pertama “Site Definition” akan meminta Pengguna memasukan nama situs web yang akan dibangun.
c. Setelah itu menekan tombol Next untuk masuk ketahap berikutnya.
Gambar 3.41 Tampilan Site Definition Dreamweaver
d. Untuk membangun situs web e-elearning ini, menggunakan Server Teknologi PHP .
Gambar 3.42 Tampilan Site Definition Dreamweaver
e. Pada jendela, Pengguna diminta menentukan lokasi penyimpanan file situs web pada komputer lokal.
Gambar 3.43 Tampilan Site Definition Dreamweaver
Gambar 3.44 Tampilan Site Definition Dreamweaver
3.6.3. Koneksi Database
Untuk menghubungkan website dengan database dibutuhkan sebuah koneksi database, yang script nya dapat diketik pada aplikasi Notepad dan termenyimpan dalam file “sqlconfig.php“ yang terdapat pada folder “include“. Adapun penjelasan listing sebagai berikut :
sqlconfig.php
<? $hostname = 'localhost'; //nama dari host $database = 'eflash'; //nama database $penggunaname = 'root'; //penggunaname dari webserver $pass = 'admin'; //password dari webserver
$sqlconfig = mysql_connect($hostname, $penggunaname, $pass)
or trigger_error(mysql_error(),E_PENGGUNA_ERROR); //koneksi ke database
mysql_select_db($database); memilih database ?>
3.6.4. Pembuatan Layout Awal
Pada proses pembuatan desain untuk keperluan halaman pembuka, 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.6.4.1. Pembuatan CSS
Dasar awal pembuatan layout terlebih dahulu memasukan kode CSS agar pengaturan tampilan lebih menarik dan memudahkan dalam pengaturan layout web ini.
a. Membuat File CSS baru. File>New>Basic page>CSS
Gambar 3.45 Tampilan editor CSS
b. Menuliskan Script kedalam kode editor Dreamweaver. Dan berikut ini adalah kode CSS yang secara garis besar digunakan dalam web e-elarning ini : body {
margin: 0; padding: 0; line-height: 1.5em; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #AAAAAA; background: #080808;}
a:link, a:visited { a:link, a:visited {
a:active, a:hover { color: #FF0000;} h1 { margin: 0px; padding: 2px 0; font-size: 30px; font-weight: bold;}
h2 { position: relative; height: 25px; margin: 0px; padding: 10px 0 0 0; font-size: 20px; font-weight: bold; text-align: center; color: #000000;}
h2 span { position: absolute; width: 15px; height: 35px; left: 0px; top: 0px;}
h3 { margin: 0 0 5px 0; padding: 2px 0 3px 0; font-size: 14px; font-weight: normal; color: #d7e13d;}
h4 { margin: 0px; padding: 0px; font-size: 14px; font-weight: bold;}
.image_wrapper { border: 1px solid #ffffff; margin-top: 3px; margin-bottom: 5px;}
.list_01 { margin: 0 0 20px 40px; padding: 0px;}
.list_01 li { margin: 0px; padding: 0 0 10px 0; .list_01 li { margin: 0px; padding: 0 0 10px 0;
width: 950px; height: 110px; padding: 0 30px 0 20px; background: url(../images/banner.jpg) no-repeat;}
#banner #site_title { float: left; width: 250px;}
/* end of bannner */ /* menu */ #menu {
float: right; width: 600px; padding: 0 10px;}
#menu ul.nav { overflow: hidden; padding: 35px 0 0 0; margin: 0px auto; list-style: none;}
#menu ul.nav li { padding: 0px; margin: 0px; display: inline;}
#menu ul.nav li a { float: left; display: block; margin: 0px 5px; padding: 10px; font-size: 16px; text-align: center; font-weight: bold; text-decoration: none; color: #000000; outline: none;}
#menu ul.nav li a:hover, #menu ul.nav li .current { color: #ffffff; background: #770000;}
#menu ul.nav li ul.nav_hover{ margin: 0px; padding: 0px; top: 72px; position: absolute; display: none; background-image:url(../images/bgmenu.jpg); #menu ul.nav li ul.nav_hover{ margin: 0px; padding: 0px; top: 72px; position: absolute; display: none; background-image:url(../images/bgmenu.jpg);
#menu ul.nav li ul.nav_hover li, #menu ul.nav li.active ul.nav_hover li { margin: 0px; padding: 0px;} #menu ul.nav li ul.nav_hover li a, #menu ul.nav li.active ul.nav_hover li a { padding: 0px 1px; margin-top:2px; font: 12px/20px arial, arial, sans-serif; height:20px;}
#menu ul.nav li ul.nav_hover li a:hover, #menu ul.nav li.active ul.nav_hover li a:hover {
background: #770000;} /* end of menu */ /* content */ #content {
clear: both; width: 910px; padding: 30px 30px 0 20px; background: url(../images/content_top.jpg) top center no-repeat;}
#side_column { float: left; width: 250px;}
#main_column { float: right; width: 600px;}
.side_column_box { position: relative; margin-bottom: 30px; background: #000000;}
.side_column_box .bottom { position: absolute; bottom: 0px; left: 0px; width: 250px; height: 10px; background: url(../images/side_column_box_bottom.jpg);}
.side_column_box h2 { background: url(../images/h2_right.jpg) right top no-repeat;} .side_column_box h2 span { background: url(../images/h2_left.jpg) no-repeat;} .side_column_box .side_column_box_content { padding: 30px;} .side_column_box form { margin: 0px; padding: 0px;}
.inputfield { .inputfield {
.main_column_section { position: relative; margin-bottom: 30px; background: #000000;}
.main_column_section .bottom { position: absolute; bottom: 0px; left: 0px; width: 600px; height: 10px; background: url(../images/main_column_section_bottom.jpg);}
.main_column_section h2 { background: url(../images/h2_right_02.jpg) right top no-repeat;} .main_column_section h2 span { background: url(../images/h2_left_02.jpg) no-repeat;} .main_column_section .main_column_section_content { padding: 30px;} .main_column_section_content p { margin-bottom: 10px;} /* end of content */ /* footer */ #footer {
clear: both; width: 780px; height: 75px; padding: 30px 90px 0 90px; text-align: center; color: #3b3838; background: url(../images/footer.jpg) no-repeat;}
#footer a { font-weight: bold; color: #000000;}
#footer .footer_menu { margin: 0 0 5px 0; padding: 0px; list-style: none;}
.footer_menu li { margin: 0px; padding: 0 20px; display: inline; .footer_menu li { margin: 0px; padding: 0 20px; display: inline;
Gambar 3.46 Tampilan kode editor CSS pada Dreamweaver
c. Kemudian Menyimpan dengan nama file style.css
Gambar 3.47 Tampilan halaman menyimpan CSS pada Dreamweaver
3.6.4.2. Pembuatan Layout Header
Dalam pembuatan Header langkah pertama adalah sebagai berikut :
a. Membuat File PHP baru.
File>New>Dynamic page>PHP
Gambar 3.48 Tampilan editor PHP
Gambar 3.49 Tampilan kode editor PHP pada Dreamweaver
b. Menghubungkan script CSS yang telah dibuat sebelumnya dengan tujuan melihat tampilan sementara dengan cara menekan tombol attach style sheet pada jendela CSS.
Gambar 3.50 Tampilan A ttach External Style Sheet pada Tool Dreamweavear
c. Memilih file yang terdapat pada lokasi file CSS yang telah dibuat sebelumnya yang telah simpan ke dalam file folder server.
Gambar 3.51 Tampilan A ttach External Style Sheet pada Tool Dreamweavear
d. Kemudian memasukan kode HTML ke dalam kode editor Dreamweaver untuk mengunggah kode style CSS yang telah dibuat.
Gambar 3.52 Tampilan background header pada kode editor HTML
Gambar 3.53 Tampilan menu header pada kode editor HTML
e. Memasukan Logo ke dalam Header Insert>Media>Flash
Gambar 3.54 Tampilan menu header pada kode editor HTML
f. Kemudian menyimpan dengan nama file header.php.
3.6.4.3. Pembuatan Sub Menu
Dalam pembuatan sub menu terdapat tabel sebagai dasar layout. Adapaun langkah-langkahnya sebagai berikut :
a. Membuat File PHP baru. Insert>Table
Gambar 3.55 Tampilan pembuatan Table
b. Memasukan jumlah rows, Columens width yang dinginkan.
Gambar 3.56 Tampilan pembuatan Table
c. Kemudian masukan menu beserta linknya menggunakan kode HTML.
Gambar 3.57 Tampilan pembuatan Table
d. Kemudian menyimpan dengan nama file side.php.
3.6.4.4. Pembuatan Layout Isi
Pada layout ini terdapat script PHP yang berfungsi untuk memanggil script PHP yang diinginkan. Adapun langkah-langkah pembuatan layout isi sebagai berikut :
a. Membuat File PHP baru. File>New>Dynamic page>PHP a. Membuat File PHP baru. File>New>Dynamic page>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 "video":
$iclpage = "category.php"; $title .= "Video Tutorial"; break;
case "about":
$iclpage = "about.php"; $title .= "About"; break;
case "contact":
$iclpage = "contact.php"; $title = "Contact"; break;
case "subscribe":
$iclpage = "subscribe.php"; $title = "Newsletter"; break;
} ?> <div class="main_column_section">
<h2><span></span><?php echo $title; ?></h2> <div class="main_column_section_content">
<p align="center"> <?php include $iclpage; ?> </p> </div> <div class="cleaner"></div> <div class="bottom"></div>
</div> <div class="cleaner"></div>
Gambar 3.58 Tampilan script layout isi pada Dreamweaver
c. Kemudian menyimpan dengan nama index2.php.
3.6.4.5. Pembuatan Layout Footer
Adapun langkah pembuatan footer sebagai berikut :
a. Membuat File PHP baru. File>New>Dynamic page>PHP
b. Menuliskan Script kedalam kode editor Dreamweaver. <div id="footer_bar">
<ul class="footer_menu"> <li><a href="./">Home</a></li> <li><a href="?page=tutorial" target="_parent">Tutorial</a></li> <li><a href="?page=video">Video Tutorial</a></li> <li><a href="forum/">Forum</a></li> <li><a href="?page=about">About</a></li> <li class="last_menu"><a href="?page=contact">Contact</a></li>
</ul> Copyright © <?php echo date("Y"); ?></div>
Gambar 3.59 Tampilan script layout Footer pada Dreamweaver
c. Kemudian menyimpan dengan nama file Footer.php.
3.6.5. Menggabungkan layout
Setelah pembuatan bagian-bagian layout yang telah dibuat sebelumnya, selanjutnya menggabungkan layout-layout tersebut menjadi satu. Dan otomatis layout tersebut akan dipakai dalam semua halaman yang terdapat pada website e- elarning ini. Adapun langkah pembuatan sebagai berikut :
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver.
index.php
<?php require_once ("include/mobile.php"); //menyisipkan file “mobile.php” yang terdapat dalam folder “include” session_start(); //memulai sessi if($_SESSION['browser']==""){ //jika sessi browser masih kosong
$mobile=mobile_detect("m/index.php","m/index.php","m/index.php"," m/index.php", "m/index.php","m/index.php","m/index.php","m/index.php"); //memanggil fungsi “mobile_detect” pada file “mobile.php” yang berguna untuk mendeteksi versi browser yang digunakan pengguna. } elseif($_SESSION['browser']=="desktop"){ //jika sessi browser adalah “desktop”
$mobile=null; //mengosongkan variable mobile
<!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 Tutorial</title> <meta name="keywords" content="Macromedia Flash, Adobe Flash, Flash
Tutorial" /> <meta name="description" content="Flash Tutorial" /> <link rel="icon" href="images/favicon.ico" type="image/x-icon" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="scripts/misc.js" type="text/javascript"></script> </head> <body> <div id="container_wrapper">
<div id="container"> <?php require("header.php"); ?> <div id="content">
<div id="side_column"> <?php require("side.php"); ?> </div> <div id="main_column"><?php require("index2.php"); ?></div> <div class="cleaner"></div>
</div> <div id="footer"><?php require("footer.php"); ?></div>
</div> </div> </body> </html>
Gambar 3.60 Tampilan hasil penggabungan layout pada Dreamweaver Gambar 3.60 Tampilan hasil penggabungan layout pada Dreamweaver
3.6.6. Pembuatan Isi Halaman
Isi halaman website e-elearning ini berisi tentang berbagai macam penjelasan yang sesuai dengan fungsinya. Dalam website e-elearning ini terdapat beberapa macam halaman yaitu :
- HOME (Halaman Utama) - TUTORIAL - VIDEO TUTORIAL - FORUM - ABOUT - CONTACT
Adapun langkah-langkah pembuatan halaman sebagai berikut :
3.6.6.1. Pembuatan Halaman Home
Home berfungsi sebagai halaman utama pada website e-learning ini dan akan terbuka pertama kali ataupun secara otomatis pada saat pengguna mengakses website e-learning ini. Adapun langkah sebagai berikut :
a. Membuat File PHP baru. File>New>Dynamic page>PHP
b. Menuliskan isi home.
Gambar 3.61 Tampilan isi home pada Dreamweaver
c. Kemudian menyimpan dengan nama file home.php.
3.6.6.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.6.6.2.1. Pembuatan Kategori Tutorial
Halaman kategori digunakan untuk pemilihan kategori tutorial Flash yang diinginkan pengguna. Adapun langkah-langkah pembuatan sebagai berikut :
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script kedalam kode editor Dreamweaver. <?php
$category = $_GET['category']; $action = $_GET['action']; $page = $_GET['page'];
if($action=="detail") include "detail.php";
switch($category) {
default: categoryList(); default: categoryList();
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.62 Tampilan script halaman kategori pada Dreamweaver
c. Kemudian menyimpan dengan nama file category.php
3.6.6.2.2. Pembuatan Halaman Daftar Tutorial
Halaman daftar tutorial digunakan untuk pemilihan tutorial dan ringkasan pembasahan tentang tutorial berdasarkan kategori yang dipilih sebelumnya. Adapun langkah-langkah pembuatan sebagai berikut.
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script 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 width="545" border="0" align="center"> <tr> <td>Pencarian Judul</td> <td>:</td> <td><input name="keyword" type="text" id="keyword" value="<?php echo
$key; ?>" size="30" /></td> </tr> <tr>
<td width="109"> </td> <td width="21"> </td> <td width="415"><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><img src="images/content_lefttop.jpg" width="23" height="20" /></td> <td background="images/container_bg2.png"> </td> <td><img src="images/content_righttop.jpg" width="23" height="20" /></td>
</tr> <tr>
<td width="3%" background="images/container_bg2.png"> </td> <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>
<td width="3%" background="images/container_bg2.png"> </td> </tr> <tr>
<td><img src="images/content_leftbottom.jpg" width="23" height="20" /></td> <td background="images/container_bg2.png"> </td> <td><img src="images/content_rightbottom.jpg" width="23" height="20"
/></td> </tr> <tr>
<td> </td> <td> </td> <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&pagenu m=$pg&keyword=$key\">$pg</a> "; } echo "<p align='right'>".$nav." </p>"; ?> </p> <p> </p>
Gambar 3.63 Tampilan script daftar tutorial pada Dreamweaver
c. Kemudian menyimpan dengan nama file browse.php.
3.6.6.2.3. Pembuatan Halaman Detail Tutorial
Halaman detail tutorial digunakan untuk melihat detail tutorial berdasarkan kategori yang dipilih sebelumnya. Adapun langkah-langkah pembuatan sebagai berikut.
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script 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="3%"><img src="images/content_lefttop.jpg" width="23" height="20" /></td> <td width="94%" background="images/container_bg2.png"> </td> <td width="3%"><img src="images/content_righttop.jpg" width="23" height="20"
/></td> </tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"><?php if($page=="tutorial") { ?><div
align="right"><a href="printview.php?id=<?php echo $id; ?>" target="_blank">Print View</a></div><?php } ?><h3>Kategori = <?php echo $data['kategori']; ?></h3>
</td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td background="images/container_bg2.png"> </td>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"><h1><?php echo $data['judul'];
?></h1></td> <td background="images/container_bg2.png"> </td> </tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png">
<?php if($page=="tutorial") echo content($data['content'], $pageNum);
else video();
?> </td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td><img src="images/content_leftbottom.jpg" width="23" height="20" /></td> <td background="images/container_bg2.png"> </td> <td><img src="images/content_rightbottom.jpg" width="23" height="20" /></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 if ($pg == $pageNum) $nav .= "$pg"; else $nav .= " <a
} $output = $piece[$pageNum-1]; $output .= "<p align='right'>Halaman ".$nav." </p>"; return $output;
function video(){ global $data; ?> <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=9,0,28,0','width','400','height','300','src','media/player?movie=<?php echo $data['content']; ?>','allowfullscreen','true','quality','high','pluginspage','http://www.adobe.com/shockwa ve/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#000000','mo vie','media/player?movie=<?php echo $data['content']; ?>','menu','false' ); //end AC code </script>
<noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=9,0,28,0"
width="400" height="300">
<param name="movie" value="media/player.swf?movie=<?php echo $data['content']; ?>"> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="allowFullScreen" value="true" /> <param name="BGCOLOR" value="#000000" /> <embed src="media/player.swf?movie=<?php echo $data['content']; ?>" allowFullScreen="true" width="400" height="300" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Ve rsion=ShockwaveFlash" type="application/x-shockwave-flash"
bgcolor="#000000"></embed> </object> </noscript> </p>
</p> <p> </p>
<p>Deskripsi : <?php echo $data['deskripsi']; ?></p> <p> </p> <p>
<?php include "comment.php"; } ?> </p>
Gambar 3.64 Tampilan script detail tutorial pada Dreamweaver
c. Kemudian menyimpan dengan nama file detail.php.
3.6.6.3. Pembuatan Halaman Video Tutorial
Halaman video tutorial ini berfungsi sebagai penjelasan tutorial tentang Flash yang berupa video tutorial. Didalam video tutorial ini pengguna dapat memberikan komentar video tutorial Flash. Halaman video tutorial ini terdapat beberapa sub halaman yaitu :
3.6.6.3.1. Pembuatan Kategori Video Tutorial
Halaman video kategori digunakan untuk pemilihan video kategori tutorial Flash yang diinginkan pengguna. Adapun langkah-langkah pembuatan sebagai berikut :
a. Membuat File PHP baru. File>New>Dynamic page>PHP a. Membuat File PHP baru. File>New>Dynamic page>PHP
<?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.65 Tampilan script video categori pada Dreamweaver
c. Kemudian menyimpan dengan nama file category.php.
3.6.6.3.2. Pembuatan Halaman Daftar Video Tutorial
Halaman daftar video tutorial digunakan untuk pemilihan video tutorial dan ringkasan pembasahan tentang video tutorial berdasarkan kategori yang dipilih sebelumnya. Adapun langkah-langkah pembuatan sebagai berikut :
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script 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 width="545" border="0" align="center"> <tr> <td>Pencarian Judul</td> <td>:</td> <td><input name="keyword" type="text" id="keyword" value="<?php echo
$key; ?>" size="30" /></td> </tr> <tr>
<td width="109"> </td> <td width="21"> </td> <td width="415"><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><img src="images/content_lefttop.jpg" width="23" height="20" /></td> <td background="images/container_bg2.png"> </td> <td><img src="images/content_righttop.jpg" width="23" height="20" /></td>
</tr>
<tr> <td width="3%" background="images/container_bg2.png"> </td> <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>
<td width="3%" background="images/container_bg2.png"> </td> </tr> <tr>
<td><img src="images/content_leftbottom.jpg" width="23" height="20" /></td> <td background="images/container_bg2.png"> </td> <td><img src="images/content_rightbottom.jpg" width="23" height="20"
/></td> </tr> <tr>
<td> </td> <td> </td> <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&pagenu m=$pg&keyword=$key\">$pg</a> "; } echo "<p align='right'>".$nav." </p>"; ?> </p> <p> </p>
Gambar 3.66 Tampilan script daftar video tutorial pada Dreamweaver
c. Kemudian menyimpan dengan nama file Browse.php
3.6.6.3.3 . Pembuatan Halaman Detail Video Tutorial
Halaman detail video tutorial digunakan untuk melihat detail video tutorial berdasarkan kategori yang dipilih sebelumnya. Adapun langkah-langkah pembuatan sebagai berikut.
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan script 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="3%"><img src="images/content_lefttop.jpg" width="23" height="20" /></td> <td width="94%" background="images/container_bg2.png"> </td> <td width="3%"><img src="images/content_righttop.jpg" width="23" height="20"
/></td> </tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"><?php if($page=="tutorial") { ?><div
align="right"><a href="printview.php?id=<?php echo $id; ?>" target="_blank">Print View</a></div><?php } ?><h3>Kategori = <?php echo $data['kategori']; ?></h3>
</td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"><h1><?php echo $data['judul'];
?></h1></td> <td background="images/container_bg2.png"> </td> </tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td background="images/container_bg2.png"> </td> <td background="images/container_bg2.png">
<?php if($page=="tutorial") echo content($data['content'], $pageNum);
else video();
?> </td> <td background="images/container_bg2.png"> </td>
</tr> <tr>
<td><img src="images/content_leftbottom.jpg" width="23" height="20" /></td> <td background="images/container_bg2.png"> </td> <td><img src="images/content_rightbottom.jpg" width="23" height="20" /></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
" <a href=\"$self?page=$page&category=$category&action=$action&id=$id&pagenum=$pg\ ">$pg</a> ";
$nav
} $output = $piece[$pageNum-1]; $output .= "<p align='right'>Halaman ".$nav." </p>"; return $output;
function video(){ global $data; ?> <script src="scripts/AC_RunActiveContent.js" type="text/javascript"></script> <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=9,0,28,0','width','400','height','300','src','media/player?movie=<?php echo $data['content']; ?>','allowfullscreen','true','quality','high','pluginspage','http://www.adobe.com/shockwa ve/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#000000','mo AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=9,0,28,0','width','400','height','300','src','media/player?movie=<?php echo $data['content']; ?>','allowfullscreen','true','quality','high','pluginspage','http://www.adobe.com/shockwa ve/download/download.cgi?P1_Prod_Version=ShockwaveFlash','bgcolor','#000000','mo
<noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=9,0,28,0"
width="400" height="300">
<param name="movie" value="media/player.swf?movie=<?php echo $data['content']; ?>"> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="allowFullScreen" value="true" /> <param name="BGCOLOR" value="#000000" /> <embed src="media/player.swf?movie=<?php echo $data['content']; ?>" allowFullScreen="true" width="400" height="300" quality="high"
pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Ve rsion=ShockwaveFlash" type="application/x-shockwave-flash"
bgcolor="#000000"></embed> </object> </noscript> </p>
</p> <p> </p> <p>Deskripsi : <?php echo $data['deskripsi']; ?></p> <p> </p> <p>
<?php include "comment.php"; } ?> </p>
Gambar 3.67 Tampilan script detail video tutorial pada Dreamweaver
c. Kemudian menyimpan dengan nama file detail.php.
3.6.6.4. Pembuatan Halaman Forum
Halaman forum berisi tentang tanya jawab dan konsultasi pembahasan tutorial Flash kepada admin serta sesama pengguna yang telah terdaftar pada forum website e-elearning ini.
a. Menginstall phpBB
Gambar 3.68 Halaman pertama penginstallan phpBB
Gambar 3.69 Menginstall phpBB
b. Pengecekan kompabilitas dan konfigurasi server.
Gambar 3.70 Halaman pengecekan kompabilitas dan konfigurasi server
Gambar 3.71 Halaman pengecekan kompabilitas dan konfigurasi server Gambar 3.71 Halaman pengecekan kompabilitas dan konfigurasi server
Gambar 3.72 Halaman pengaturan database server
Gambar 3.73 Halaman pengaturan database berhasil
d. Mengatur Administrator.
Gambar 3.74 Halaman pengaturan administrator
Gambar 3.75 Halaman pengaturan administrator berhasil
e. Mendownload file pengaturan ( Config.php).
Gambar 3.76 Halaman download file pengaturan ( Config.php)
Gambar 3.77 Halaman file config.php telah ada di server
f. Mengatur email.
Gambar 3.78 Halaman pengaturan email
g. Membuat database.
Gambar 3.79 Halaman pembuatan database
Gambar 3.80 PhpBB selesai diinstall
Gambar 3.81 Halaman papan pengaturan administrator
3.6.6.5. Pembuatan Halaman About
Halaman About ini berisi tentang visi dan misi pembuatan website e- elearning ini. Adapun langkah-langkah pembuatan sebagai berikut.
a. Membuat file PHP baru.
File>New>Dynamic page>PHP
b. Menuliskan HTML kedalam kode editor Dreamweaver.
Gambar 3.82 Tampilan script detail video tutorial pada Dreamweaver
c. Kemudian menyimpan dengan nama file About.php
3.6.6.6. Pembuatan Halaman Contact
Halaman Contact berisi tentang alamat email ataupun alamat jejaring sosial yang dapat dihubungi apabila pengguna hendak menghubungi admin. Adapun langkah-langkah pembuatan sebagai berikut.
a. Membuat file PHP baru. File>New>Dynamic page>PHP
b. Menuliskan HTML kedalam kode editor Dreamweaver.
Gambar 3.83 Tampilan script contact pada Dreamweaver Gambar 3.83 Tampilan script contact pada Dreamweaver