Laporan Berkala I (2 Minggu Pertama)

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 . . . <script type="text/javascript" src="ckeditor/ckeditor.js"> 4. Setelah itu, buatlah "textarea" dengan format tag: . . . (name dan ukuran menyesuaikan) **Sekedar catatan, untuk menampilkan hasil editing dari CKEditor, tidak perlu menggunakan "<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) <script language="javascript" src="jquery-1.4.js"> <script language="javascript" src="headline.js"> <script type="text/javascript"> $(document).ready(function() { bukaContent($('#slideAwal'),'div1'); });

(sisipkan div ini ke tempat yang diinginkan, untuk menampilkan slider)

(ini adalah panel selector untuk mengontrol slider secara manual, tempat juga menyesuaikan)