Laporan Berkala I (2 Minggu Pertama)
advertisement
Laporan Berkala I
(2 Minggu Pertama)
Bramantya Putra Pamungkas
TI – 2.3 (1110012)
PT. Naraya Telematika
Jl. Puncak Borobudur, Malang
PROGRAM STUDI TEKNIK INFORMATIKA
Sekolah Tinggi Teknik Atlas Nusantara (STTAR) MALANG
APRIL 2012
A. Nama Kegiatan
Membuat contoh Website “Company Profile”.
B. Tujuan Kegiatan
Mahasiswa diberikan kegiatan tersebut oleh perusahaan agar perusahaan dapat
mengetahui dan memantapkan kemampuan pemrograman Web mahasiswa terutama
yang menggunakan bahasa pemrograman PHP. Berguna juga sebagai pengenalan
metode MVC dan PHP jenis PBO (Pemrograman Berorientasi Objek). Pemantapan
ini bertujuan agar nantinya mahasiswa dapat membantu perusahaan dalam project
perusahaan yang memerlukan kompetensi seperti yang telah disebutkan diatas.
C. Aplikasi Yang Digunakan
1. Adobe Dreamweaver CS5
2. Web Browser (Mozilla, Chrome, Internet Explorer), web browser yang digunakan
bervariasi untuk menyesuaikan tampilan web agar perbedaan tampilan antar
browser tidak terlalu jauh berbeda satu sama lain.
3. Notepad ++
4. XAMPP (Apache dan MySQL)
5. Navicat / phpmyadmin (localhost)
D. Langkah Kerja dan Gambar
1. Menyiapkan dan menjalankan XAMPP (Apache dan MySQL).
2. Mencari template yang sekiranya relevan dengan tema web Company Profile yang
akan dibuat.
Template yang sudah di download
3. Mengedit template yang sudah di download menggunakan Adobe Dreamweaver
CS5, proses editing meliputi tampilan grafis, text, menu, dan link.
Editing grafis dengan Adobe Dreamweaver
Proses editing menu dan link pada tampilan web
4. Menyiapkan database yang akan digunakan sebagai sumber data pada compro
tersebut. Pembuatan database dapat melalui Navicat atau phpmyadmin pada
localhost. Pembuatan database meliputi pembuatan tabel-tabel yang diperlukan
dalam compro nantinya.
Pembuatan database dengan localhost/phpmyadmin
5. Mulai menyusun script PHP untuk pengoperasian web compro tersebut. Pada
tahap ini, mahasiswa mulai mengenal dan menerapkan metode MVC (Model
View Controller). Web dibuat dengan 2 versi, yaitu versi pengunjung atau
customer, dan versi admin. Pada versi admin, untuk masuk memerlukan proses
autentifikasi (login), dan tampilan hanya sebatas tabel dengan menu-menu untuk
melakukan editing pada isi dari web tersebut.
Proses koding menggunakan Notepad ++
Tampilan Proses Login untuk masuk halaman Admin
Tampilan Halaman Admin dengan menu-menu editing
6. Menambahkan plugin-plugin pada tampilan web agar lebih menarik, sebagai
sentuhan akhir. Dalam tahap ini, mahasiswa mulai mengenal dan menerapkan
Jquery untuk slider headline dan CKEditor untuk input text. Untuk Jquery slider,
gambar yang akan di slide harus sudah ada dalam database (alamat file gambar).
Tampilan CKEditor sebagai interface input text yang memudahkan user
Pada Headline web, diberi JQuery Slider yang memberikan tampilan gambar yang
dapat berganti tiap beberapa detik, menambah kemenarikan tampilan.
7. Proses Dokumentasi materi baru (CKEditor dan Jquery Slider) dalam bahasa
sendiri yang sekiranya mudah dipahami.
a. CKEditor
langkah-langkah instalasi CKEditor pada halaman web:
1. download ckeditor.zip, dari web banyak kok, cari aja di google
2. ekstrak menjadi sub-folder "ckeditor" dari folder project
3. kemudian, letakkan script ini diantara <head>. . .</head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
4. Setelah itu, buatlah "textarea" dengan format tag:
<textarea rows="" cols="" name="" class="ckeditor">. . .</textarea>
(name dan ukuran menyesuaikan)
**Sekedar catatan, untuk menampilkan hasil editing dari CKEditor, tidak
perlu menggunakan "<pre>...</pre>"
b. Jquery Slider
Sebelumnya, pastikan bahwa:
1. file-file berikut ini sudah ada dalam folder project: head.css, headline.js,
jquery-1.4.js (lihat project "coprofile_mvc")
2. database sudah dibuat, dan tabel untuk menyimpan alamat gambar sudah
dibuat
3. file gambar yang akan di slide sudah ada dalam sub folder images
(script ini ditambahkan sebagai deklarasi fungsi javascript)
<link rel="stylesheet" type="text/css" href="head.css">
<script language="javascript" src="jquery-1.4.js"></script>
<script language="javascript" src="headline.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
bukaContent($('#slideAwal'),'div1');
});
</script>
(sisipkan div ini ke tempat yang diinginkan, untuk menampilkan slider)
<div id="divContent">
<?php
mysql_connect("localhost","root",""); //Sesuai dengan database
mysql_select_db("co profile");
//yang sudah dibuat
// Tampilkan 4 gambar headline dari database
$sql = mysql_query("SELECT * FROM slider ORDER BY
idimage ASC LIMIT 5");
$no=1;
while($r=mysql_fetch_array($sql))
{
echo "<div id='div$no'>
<img src='$r[image]' height='325' width='875'>
</div>";
$no++;
} ?>
</div>
(ini adalah panel selector untuk mengontrol slider secara manual, tempat juga
menyesuaikan)
<div id="divTrigger">
<a href="javascript:;" onClick="bukaContent(this,'div1')"
id="slideAwal">1</a>
<a href="javascript:;" onClick="bukaContent(this,'div2')">2</a>
<a href="javascript:;" onClick="bukaContent(this,'div3')">3</a>
<a href="javascript:;" onClick="bukaContent(this,'div4')">4</a>
<a href="javascript:;" onClick="bukaContent(this,'div5')">5</a>
</div>
