LAPORAN PRAKTIKUM TEKNOLOGI FRAMEWORK PERTEMUAN KE 1

(1)

LAPORAN PRAKTIKUM TEKNOLOGI FRAMEWORK

PERTEMUAN KE – 1

Disusun oleh

JURUSAN SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER

A

K

AKOM YOGYAKARTA

2016

BUJANG PUTRO WICAKSONO

135610046

(2)

LAPORAN PRAKTIKUM TEKNOLOGI FRAMEWORK

PERTEMUAN KE – 1

A. MAKSUD DAN TUJUAN

Dalam pelaksanaan praktikum Teknologi Framework pada pertemuan pertama yang membahas tentang “Installasi Framework YII dan Menggunakan Generator” memiliki maksud dan tujuan agar mahasiswa mampu melakukan instalasi Framework Yii, serta mampu melakukan setting generator. Selain hal itu mahasiswa juga bisa mengetahui cara kerja View, Controller, Model dan penggunaan Objek dalam Model.

B. DASAR TEORI

OOP atau Object Oriented Programming adalah teknik pemrograman berbasis object. Pemrograman dibagi dalam object-object kemudian di dalam object-object ini ada property dan method. Property ini lebih dikenal dengan variable yang bersifat public dan method ini merupakan function. Object-object ini bisa diperluas lagi dengan inheritance atau turunan. Object-object turunan ini biasa dipakai untuk membuat object yang merupakan modifikasi dari object lain.

Dengan pengelompokan-pengelompokan ini maka programming akan terstruktur dengan baik dan mudah dimanage. Bahasa programming yang sudah mengimplementasikan OOP adalah C++ dan Java. Pemograman PHP akhir-akhir ini juga dikembangkan menjadi bahasa pemrograman berbasis OOP (Object Orieented Programming) dengan lahirnya framework-framework berbasis PHP.

Yii adalah framework yang full OOP dimana dengan OOP ini, kita lebih baik dalam memanage code, dapat menglompokkan fungsi2 kedalam kelas-kelas, dapat modify program dengan lebih baik, program dapat lebih rapi dan lebih mudah dibaca

(3)

C. PEMBAHASAN

 Melakukan Pemeriksaan Framework Yii

Gambar diatas adalah proses saat melakukan pemeriksaan Framework Yii, apakah pada PDO MySQL extension sudah bernilai Passed atau belum dengan cara mengetikkan http://localhost/requirements/ pada URL.

 Menjalankan Generator Yiic melalui CMD

Gambar diatas adalah tahap awal ketika akan melakukan Generator Yiic melalui CMD, dengan langkah awal yaitu masuk ke direktori framework  dengan cara cd yiiframework  lalu dilanjutkan dengan cd framework  selanjutnya baru menjalankan yiic.

(4)

 Menjalankan Generator Yiic melalui CMD

(( Proses Generate ))

Gambar diatas adalah proses Generator Yiic melalui CMD, dalam langkah tersebut melakukan pembuatan webapp dengan nama pert1 dengan perintah yiic webapp ../pert1 dimana pembuatan webapp tersebut akan diletakkan di C:\xampp\htdocs\yiiframework\pert1. Ketika kita menjawab yes maka proses Generate akan mulai.

 Mengatur penggunaan Gii Generator

Gambar diatas adalah proses penggunaan Gii Generator, dalam scrip diatas kita menghilangkan tanda komentar yaitu /*...*/ yang terdapat pada baris 23

(5)

 Mencoba Gii Generator

Gambar diatas adalah proses mencoba Gii Generator, dengan memanggil http://localhost/pert1/index.php?r=gii. Maka setelah menjalankan URL tersebut akan diminta memasukkan Password yang telah diubah tadi, disini saya memasukkan password saya “bujangpw” lalu klik Enter.

 Menggunakan Controller Generator

Gambar diatas adalah proses menggunakan Controller Generator, dimana kita melakukan pengisian Cotroller ID dengan “hallo” dan default dari Action Ids adalah index. Lalu klik tombol Generate maka sistem akan melakukan pembuatan direktori baru beserta file didalamnya yaitu  ./protected/controller/HalloController.php dan juga ./protected/views/index.php

(6)

 Melakukan pengecekan tampilan

Gambar diatas adalah proses mengecekan tampilan dengan menjalankan http://localhost/yiiframework/pert1/index.php?r=hallo. hasil yang maka tampilan nya hanya akan berisi  hallo/index.

 Melakukan pengujian, pengubahan pada HalloController.php & Index.php

Didalam script disamping terdapat class HalloController memiliki extends ke file Controller. Selanjutnya melakukan pembuatan public function yang bernama actionIndex() yang didalamnya menjalankan perintah render yang akan memanggil index.

Script disamping adalah pembuatan view pepatah.php, yang berfungsi untuk menampilkan kalimat berupa “Selamat datang di Kampus STMIK AKAKOM YK”. Lalu untuk menampilkan id controller dengan perintah .$this->id; dan menampilkan Nama Action dengan perintah .$this->action->id;

(7)

Ketiga gambar diatas adalah proses pengujian, melihat, serta melakukan pengubahan pada HalloController.php & Index.php.

Maka setelah itu bisa melakukan pengecekan tampilan dengan mengunjungi URL pada http://localhost/pert1/index.php?r=hallo.Sehingga tampilannya adalah sebagai berikut :

 Menambahkan action dan view pada HalloController.php

Gambar diatas adalah proses penambahan Action pada HalloController yang ditunjukkan oleh penambahan script pada baris 10 sampai dengan 14.

Didalam script diatas terdapat public function yang bernama actionPepatah() yang didalamnya menjalankan perintah render yang akan memanggil pepatah.

public function actionPepatah() {

$this->render('pepatah'); }

(8)

Gambar diatas adalah proses pembuatan View pepatah.php, yang akan diletakkan di ./protected/views/hallo/pepatah.php. Didalam View tersebut akan menampilkan kalimat dengan perintah echo “....”; yaitu kalimay yang ditampilakn adalah  Rajin Pangkal Pandai  Sedikit Demi Sedikit Lama-lama Menjadi Bukit.

Gambar diatas adalah tampilan saat mengunjungi http://localhost/pert1/index.php?r=hallo/pepatah.

 Membuat Model  Kata.php

Gambar diatas adalah proses pembuatan Model dengan nama Kata.php, lalu file tersebut disimpan di  ./protected/models/Kata.php.

(9)

Pada Script diatas terdapat class Kata yang memuat variabel public yaitu kata dan katakan, pada variabel katakan memiliki value “Kata Bijak”. Selanjutnya terdapat public function setKata yang didalmnya memuat parameter variabel kt yang menjalankan fungsi $this->kata = $kt setelah itu terdapat public function getKata yang menjalankan fungsi return $this->kata

 Membuat View  kataPepatah.php

Gambar diatas adalah proses pembuatan file View kataPepatah.php. Lalu file tersebut disimpan di : ./protected/views/hallo/kataPepatah.php

Pada Script diatas terdapat variabel model yang memiliki perintah setKata yang memiliki value berupa kalimat  “Muda menabung tua beruntung.”

Setelah itu terdapat perintah echo”...”; yang melakukan pemanggilan variabel model yang menjalankan perintah ->katakan dan perintah ->getKata().

(10)

Gambar diatas adalah proses pengubahan serta penambahan script pada HalloController.php yang ditunjukkan pada baris 15 sampai dengan 19.

Pada Script diatas terdapat public function actionKataPepatah() yang didalmnya memuat variabel model yang berfungsi membuat class baru yaitu Kata dan menjalankan variabel this yang melakukan render yang memuat kataPepatah, lalu menjalnkan array, array tersebut memuat model yang menjalankan variabel model.

Gambar diatas adalah tampilan saat mengunjungi http://localhost/pert1/index.php?r=hallo/kataPepatah.

(11)

D. LATIHAN / TUGAS

 Membuat Model

(12)

 Membuat Controller

 Pengujian Tampilan

E. KESIMPULAN

Dalam pelaksanaan praktikum Teknologi Framework pada pertemuan pertama yang membahas tentang “Installasi Framework YII dan Menggunakan Generator” maka dapat diambil simpulan bahwa mahasiswa dapat melakukan instalasi Framework Yii, mampu setting generator, dan mengetahui cara kerja View, Controller, serta Model.

(13)

LAPORAN PRAKTIKUM TEKNOLOGI FRAMEWORK

PERTEMUAN KE – 2

MODEL MENGGUNAKAN C-FORM MODEL

Disusun oleh

JURUSAN SISTEM INFORMASI

SEKOLAH TINGGI MANAJEMEN INFORMATIKA & KOMPUTER

A

K

AKOM YOGYAKARTA

2016

BUJANG PUTRO WICAKSONO

135610046

(14)

LAPORAN PRAKTIKUM TEKNOLOGI FRAMEWORK

PERTEMUAN KE – 2

MODEL MENGGUNAKAN C-FORM MODEL

A. MAKSUD DAN TUJUAN

Dalam pelaksanaan praktikum Teknologi Framework pada pertemuan kedua yang membahas tentang “Model Menggunakan C-Form Model” memiliki maksud dan tujuan agar mahasiswa mampu melakukan pembuatan web menggunakan

Model-View-Controller pada framework Yii.

B. DASAR TEORI

MVC atau disebut Model-View-Controller adalah salah satu tipe arsitektur aplikasi. Yii menggunakan MVC struktur aplikasi yang menggunakan arsitektur MVC, akan dibagi menjadi tiga bagian.

Bagian Model, yang mendefinisikan hubungan antar data dalam DB dan aturan yang harus diikuti saat menyimpan data ke DB. Hal ini juga memberi kita alat untuk membaca / menyimpan data dari / ke DB. Model adalah hal yang sangat sederhana dalam Yii, tidak harus menulis satu barispun kode, model dapat dibuat secara otomatis menggunakan command line. Setiap tabel di DB memiliki model tersendiri.

Bagian View, yang digunakan hanya untuk menampilkan data kepada pengguna. Ia tidak menulis ke DB atau menghitung hal-hal sulit. View hanya menerima data dan menampilkannya menggunakan HTML, CSS, JS, dll. View tidak memiliki kecerdasan, hanya menerima data dari Controller dan menampilkannya. Ini adalah satu-satunya tempat di mana kita menggunakan HTML, CSS, JavaScript dll.

Bagian Controller, yang memproses dan merubah data, menangani tindakan pengguna, memutuskan, menjumlah, berpikir dan memanggil model dan menampilkan. Controller dimulai (dan kodenya dijalankan) setiap kali anda memasukkan alamat di browser. Dalam kode, anda dapat membaca data dari POST, GET atau variabel SESSION, bekerja dengan DB, dll.

(15)

C. PEMBAHASAN



Menjalankan Generator Yiic melalui CMD

(( Proses Generator ))

Gambar diatas adalah proses Generator Yiic melalui CMD, dalam langkah tersebut melakukan pembuatan webapp dengan nama pert2 dengan perintah yiic webapp ../pert2 dimana pembuatan webapp tersebut akan diletakkan di C:\xampp\htdocs\yiiframework\framework\pertemuan2. Ketika kita menjawab yes maka proses Generate akan mulai.

(16)

Gambar diatas adalah proses pengaturan konfigurasi pada file main.php yang terletak di ./protected /config/main.php. dalam scrip diatas kita menghilangkan tanda komentar yaitu /*...*/. Selanjutnya kita melakukan pengubahan password pada baris 20.



Melakukan pembuatan file Kotak.php

Script diatas adalah pembuatan model Kotak.php, yang didalmnya mendefinisikan class yang memiliki extends ke CformModel, dimana didalam class tersebut juga mendefinisikan adanya variabel panjang dan lebar. Setelah itu terdapat perintah :

public function rules() { return array(

array('panjang,lebar', 'required'), array('panjang,lebar', 'numerical', 'integerOnly'=>true)); }

Script pada kotak diatas berfungsi untuk melakukan pembuatan function

bernama rules yang memiliki nilai balikan (return) berupa array panjang dan lebar yang bersifat required dan numeric, dan hanya diperbolehkan nilai masukan

(17)

public function attributeLabels() {

return array('panjang'=>'Panjang Kotak', 'lebar'=>'Lebar Kotak');

}

Script pada kotak diatas berfungsi untuk melakukan pembuatan function bernama attributeLabels yang memiliki nilai balikan (return) berupa array

panjang yang memiliki nilai yang sama dengan  Panjang Kotak, dan lebar yang

memiliki nilai yang sama dengan  Lebar Kotak. public function luas() {

return $this->panjang*$this->lebar; }

public function keliling(){

return 2*($this->panjang+$this->lebar); }}

Script pada kotak diatas berfungsi untuk melakukan pembuatan function bernama luas yang memiliki nilai balikan (return) dimana hasil luas didapat dari variabel panjang dikalikan dengan lebar.

Setelah itu terdapat juga function bernama kelililang yang memiliki nilai

balikan (return) dimana hasil keliling didapat dari 2X variabel panjang ditambah

dengan lebar.

(18)

Gambar diatas adalah proses menggunakan Controller Generator, dimana kita melakukan pengisian Cotroller ID dengan “Kotak” dan default dari Action Ids

adalah index. Lalu klik tombol Preview, klik lagi  Generate maka sistem akan

melakukan pembuatan direktori baru beserta file didalamnya yaitu

controller/KotakController.php dan juga views/index.php



Mengubah / Mengedit pada script KotakController.php

Gambar diatas adalah proses pengubahan pada script KotakController yang terdapat di protected\controllers\KotakController.php. Pada file KotakController akan digunakan untuk memproses dan merubah data, menangani tindakan pengguna, memutuskan, menjumlah, berpikir dan memanggil model dan menampilkan. Controller dimulai (dan kodenya dijalankan) setiap kali anda memasukkan alamat di browser. Dalam kode tersebut dapat membaca data dari POST, GET atau variabel SESSION, atau bisa juga bekerja dengan DB.

(19)



Melakukan pembuatan View, menciptakan Form Kotak dengan Generator

Gambar diatas adalah proses untuk menciptakan Form dengan menggunakan menggunakan Form Generator, dimana kita melakukan pengisian Model Class dengan “Kotak” dan View Name adalah _form, serta mengisikan Scenario dengan isiam “kotak” Lalu klik tombol Preview, maka akan terlihat hasilnya seperti gambar disebelah kanannya yang menunjukkan bahwa “The Form has been generated

Successfully”

(20)

Script diatas adalah pembuatan view input.php, yang didalmnya terdapat perintah sebagai berikut :

<?php $this->breadcrumbs = array ( 'Kotak'=>array('index'), 'Input Data', ); ?> <h1> Input Kotak </h1> <?php $this->renderPartial('_form', array('model'=>$model)); ?>

Breadcrumbs adalah sebuah navigasi pada web yang biasanya memberikan

informasi kepada pengunjung web dimana posisinya sekarang berada yang memiliki nilai yang sama dengan array yang memuat Kotak yang memuat array index dan juga Input Data. Selanjutnya melakukan renderPartial yang digunakan untuk me-render _form yang menjalankan array dan array tersebut memuat model yang diambilkan dari variabel model. Fungsi dari renderPartial() akan menampilkan view tanpa layout / template sama sekali, dan itulah yang selalu digunakan jika ingin menampilkan Ajax.



Melakukan pengubahan / mengedit dapa file _form.php

Gambar diatas adalah proses pengubahan pada script _form.php, yang dilakukan adalah mengaktifkan validasi input menggunakan Ajax. Langkah awal yang dilakukan adalah melakukan pengubahan pada script baris10, yaitu :

(21)

Selanjutnya melakukan validasi widget yang dilakukan seperti berikut ini : 'enableAjaxValidation'=>true, 'enableClientValidation'=>true, 'clientOptions'=>array( 'validateOnType'=>true, 'validateOnChange'=>true,),

Pada potongan script diatas baris pertama digunakan untuk mengaktifkan

Validasi Ajax yang disetting bernilai True, lalu baris dua digunakan untuk mengaktifkan Validasi Client yang disetting bernilai True, selanjutnya baris tiga

digunakan untuk mendefinisakn bahwa clientOption memuat array, dan didalam array tersebut melakukan setting validate pada Type yang di buat On, selanjutnya juga melakukan setting validate pada Change yang di buat On.



Melakukan pembuatan file luas.php yang terdapat pada View

Gambar diatas adalah proses pembuatan script luas.php, didalam script tersebut terdapat perintah sebagai berikut ini :

<?php

$model->panjang = $_GET["panjang"]; $model->lebar = $_GET["lebar"];

echo"Panjang ".$model->panjang; echo " <br>"; echo"Lebar ".$model->lebar; echo " <br>";

Pada potongan script diatas melakukan pendefinisian variabel yang terdapat pada model dengan nama panjang yang didapatkan dari method GET[“panjang”] selain itu juga terdapat variabel pada model dengan nama lebar yang didapatkan dari method GET[“lebar”]. Selanjutnya menampilkan Panjang yang didapat dari model untuk mendapatkan value panjang, setelah itu menampilkan Lebar yang didapat dari model untuk mendapatkan valu lebar.

(22)

echo"Luas ".$model->luas(); echo " <br>"; echo"Keliling ".$model->keliling();

?>

Pada potongan script diatas digunakan untuk menampilkan hasil keluaran berupa hasil Luas yang didapatkan dari pemanggilan method luas() yang didapatkan dari model, berikutnya menampilkan Keliling yang didapatkan dari pemanggilan

method keliling() yang didapatkan dari model.



Tampilan file index.php

Gambar diatas adalah proses pembuatan script index.php, didalam script tersebut terdapat perintah sebagai berikut ini :

<?php

$this->breadcrumbs=array( 'Kotak', ); ?>

<h1> <?php echo $this->id . '/'. $this->action->id; ?> </h1> <p> You may change the content of this page by modifying

the file <tt> <?php echo __FILE__; ?></tt>. </p>

Breadcrumbs adalah sebuah navigasi pada web yang biasanya memberikan

informasi kepada pengunjung web dimana posisinya sekarang berada yang memiliki nilai yang sama dengan array yang memuat Kotak. Selanjutnya pada potongan script diatas menampilkan id serta action id.

(23)

 Tampilan ketika dijalankan

Gambar diatas adalah hasil tampilan ketika kita selesai mengisi inputan pada “Input Kotak” , dimana inputan yang dilakukan adalah sebagai berikut :

 Pada panjang diberi inputan  5

 Pada lebar diberi inputan  10

Sehingga hasil yang didapat untuk Luas yaitu  5 dikalikan 10 = 50, sedangkan untuk hasil kelilingnya yaitu 2x(5+10) maka hasilnya adalah 30

(24)

D. LATIHAN / TUGAS

Latihan 1  BALOK

(25)

(26)

Latihan 2  LINGKARAN + TABUNG

(27)

(28)

E. KESIMPULAN

Dalam pelaksanaan praktikum Teknologi Framework pada pertemuan kedua yang membahas tentang “Model Menggunakan C-Form Model” maka dapat diambil kesimpulan bahwa mahasiswa juga mengerti apa kegunaan Model-View-Controller, serta mahasiswa dapat melakukan pembuatan web menggunakan