Laporan Berkala I (2 Minggu Pertama)

Ukuran: px

Mulai penontonan dengan halaman:

Download "Laporan Berkala I (2 Minggu Pertama)"

Inge Wibowo
7 tahun lalu
Tontonan:

1 Laporan Berkala I (2 Minggu Pertama) Bramantya Putra Pamungkas TI 2.3 ( ) PT. Naraya Telematika Jl. Puncak Borobudur, Malang PROGRAM STUDI TEKNIK INFORMATIKA Sekolah Tinggi Teknik Atlas Nusantara (STTAR) MALANG APRIL 2012

2 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 XAMPP (Apache dan MySQL) 5. Navicat / phpmyadmin (localhost) D. Langkah Kerja dan Gambar 1. Menyiapkan dan menjalankan XAMPP (Apache dan MySQL).

Mengedit template yang sudah di download menggunakan Adobe Dreamweaver CS5,

3 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

4 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

5 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

6 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

7 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")

8 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>

9 (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>

dokumen-dokumen yang mirip

Bab 4 Implementasi dan Evaluasi

Bab 4 Implementasi dan Evaluasi 4.1 Implementasi Sistem Tahap implementasi dan pengujian sistem, dilakukan setelah tahap analisis dan perancangan selesai dilakukan. Pada bab ini akan dijelaskan implementasi