Laporan Berkala I (2 Minggu Pertama) - sttar.ac.id · mengetahui dan memantapkan kemampuan...

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>




</div>

Laporan Berkala I (2 Minggu Pertama) - sttar.ac.id · mengetahui dan memantapkan kemampuan...

Documents

Transcript of Laporan Berkala I (2 Minggu Pertama) - sttar.ac.id · mengetahui dan memantapkan kemampuan...