peta situs & proses bisnis intro – codeigniter templating...

Peta Situs & Proses Bisnis Intro – CodeIgniter Templating CSS Anief Fauzan Rozi, S. Kom., M. Eng.

9/17/16 Pemrograman Berbasis Web Universitas Mercu Buana Yogyakarta 1

Kompetensi

!   Mahasiswa mengetahui peta situs suatu web

!   Mahasiswa mengetahui proses bisnis pada halaman web

!   Mahasiswa mengetahui framework CodeIgniter

! Mahasiswa mengetahui manfaat CSS untuk templating layout website

9/17/16 Pemrograman Berbasis Web

Universitas Mercu Buana Yogyakarta

Pokok Bahasan

! Peta situs

!   Proses bisnis

! CodeIgniter: Hello world

! Templating CSS



Peta Situs & Proses Bisnis Anief Fauzan Rozi, S. Kom., M. Eng.


Apakah peta situs itu?



Contoh peta situs…



Peta situs adalah



! Kerangka website yang memudahkan pengguna dalam memahami isi website

! Peta situs dapat berupa susunan menu, sub-menu sampai tingkat kedalaman tertentu

! Peta situs dapat juga berupa susunan modul/fitur dalam sebuah website

Apakah proses bisnis itu?



Contoh proses bisnis…



Proses bisnis adalah….

! Suatu kumpulan aktivitas atau pekerjaan terstruktur yang saling terkait untuk menyelesaikan suatu masalah tertentu atau yang menghasilkan produk atau layanan (demi meraih tujuan tertentu).

! Suatu proses bisnis dapat dipecah menjadi beberapa subproses yang masing-masing memiliki atribut sendiri tapi juga berkontribusi untuk mencapai tujuan dari superprosesnya.

! Analisis proses bisnis umumnya melibatkan pemetaan proses dan subproses di dalamnya hingga tingkatan aktivitas atau kegiatan



Proses bisnis adalah….

!   Proses bisnis dapat diperoleh dengan berbagai cara, misalnya: ! Studi literatur

! Wawancara

!   Focus Group Discussion (FGD)

!   Proses bisnis dapat disampaikan dalam berbagai cara, misalnya: !   Diagram

!   Alur cerita à naskah



Alur pengembangan sistem

1.  MOU

2.  Tentukan peta situs dan proses bisnisnya

3.  Analisis – pemrograman – pengujian internal

4.  Pengujian eksternal

5.  Serah terima

6.  Launching



Front-end dan back-end

!   Front-end layer application ! Aplikasi web yang terletak di layer depan yang didesain untuk

dapat diakses oleh pengguna tanpa proses autentifikasi.

!   Back-end layer application ! Aplikasi web yang terletak di layer belakang yang didesain

untuk manipulasi dan olah data. !   Layer ini biasa disebut sebagai halaman admin, dan untuk

dapat mengaksesnya dibutuhkan autentifikasi berupa username dan password

! Pembuatan peta situs sebaiknya dipisah antara front-end layer application dan back-end layer application



Studi Kasus: Phonebook

! Peta Situs back-end application layer



Studi Kasus: Phonebook

! Peta Situs front-end application layer



Pertanyaan???



Tugas 4

1.  Tentukan judul, kemudian buat peta situs dan proses bisnis transaksi dari tugas besar yang akan Anda kerjakan.

2.  Tugas dikumpul via email dengan ketentuan: !   Subject: 2016-1 WEB Sitemap [prodi][kelas][NIM][Nama]

! Contoh: 2016-1 WEB Sitemap SI 22 130293920 John

!   Format penamaan file:

!   2016-1_WEB_Sitemap_[prodi]_[kelas]_[NIM]_[Nama].pdf

! Contoh:

!   2016-1_WEB_Sitemap_SI_22_130293920_John.pdf



Intro – CodeIgniter Anief Fauzan Rozi, S. Kom., M. Eng.


Kompetensi

! Mahasiswa mengetahui dan memahami konsep dasar framework dalam membuat website yang dinamis.



Pokok Bahasan

! Pengantar

! Persiapan

! Instalasi CodeIgniter

! Istilah-istilah pada CodeIgniter

! Struktur URL pada CodeIgniter

!   Hello World



Pengantar

!   Framework adalah wadah, tempat, kerangka kerja yang terdapat beberapa folder yang disediakan untuk menyimpan file project.

! Terdiri dari file-file pustaka berupa class-class PHP yang bisa di-include-kan dalam aplikasi yang sedang kita kembangkan.

!   Framework yang akan digunakan pada praktikum ini adalah CodeIgniter atau biasa disingkat dengan CI.



Persiapan

! Harus sudah terpasang web server

!   Download CI versi 3



Instalasi CodeIgniter

! Ekstrak file terkompresi menjadi sebuah folder

!   copy dan paste ke dalam direktori htdocs.

! Pastikan instalasi berhasil dengan cara mengakses http://localhost/folder_hasil_ekstraksi/



Istilah-istilah pada CodeIgniter



Struktur URL pada CodeIgniter

1.  base_url(), yaitu nama domain kita. Perlu kita definisikan pada application à config à config.php.

2.  Class, yaitu nama file controller dan nama class dalam file controller. Keduanya harus sama diawali dengan huruf besar.

3.  Function, yaitu nama fungsi dalam sebuah controller.

4.  Id, kode unik sebagai pengenal dalam fungsi



!!!!!!!!

!1! 2! 3! 4!

Hello World ! Konsep yang digunakan pada framework adalam konsep MVC (Model-

View-Controller). !   Model à class-class dengan bahasa PHP yang dapat mengakses database.

Dalam teknis praktiknya, semua script PHP yang berhubungan dengan database harus disimpan di dalam folder model.

!   View à class-claas dengan bahasa PHP yang digunakan untuk mengatur tampilan. Semua script yang berhubungan dengan tampilan disimpan dalam folder view.

!   Controller à class-class dengan bahasa PHP yang digunakan untuk mengatur keterkaitan antara class-class yang lain seperti model, view, helper, library.

! Dengan sedikit penjelasan di atas, maka dalam membuat tampilan di browser sedikitnya dibutuhkan pemrograman controller dan view.



Pertanyaan???



Tugas 5

1.  Install web server

2.  Download CI versi 3

3.  Ekstrak file terkompresi, kemudian copy-paste ke folder htdocs.

4.  Akses framework tersebut dengan browser •  localhost/folder_hasil_ekstraksi

5.  Ubahlah default tampilan tersebut menjadi tampilan awal web Anda.



Templating CSS Anief Fauzan Rozi, S. Kom., M. Eng.


Kompetensi

! Mahasiswa mengetahui dan mampu menerapkan sintaksis CSS dan jenis-jenisnya

! Mahasiswa mampu menerapkan pemanggilan eksternal CSS dalam framework CodeIgniter



Pokok Bahasan

! Sintaksis CSS

!   Inline Style

!   Internal Style Sheet

!   External Style Sheet

! Memasang external CSS ke CI



Sintaksis CSS



Inline Style

! Ditulis pada tag element html yang bersangkutan pada dokumen html tertentu.

! Contoh : <p style="color:sienna;margin-left:20px">This is a paragraph.</p>



Internal Style Sheet ! Ditulis dalam satu file dengan HTML, diletakkan di antara tag <head></head>

! Contoh:

<html>

<head>

<title>tuliskan judul di sini</title>

<style type="text/css"> hr {color:sienna;}

p {margin-left:20px;} body {background-image:

url("images/back40.gif");} </style>

</head>

<body>

<p>

Tuliskan isi/konten web disini <hr/>

</p>

</body>

</html>



External Style Sheet (1)

! Disimpan dalam file terpisah dengan file HTML

! Berekstensi *.css

! Pemanggilan css eksternal diletakkan di antara tag <head></head>

! Contoh:

<head> <link rel="stylesheet" type="text/css" href="lokasifile.css" /> </head>




!   Selector !   Tag-tag yang dikenali oleh dokumen HTML !   Class (.)

Dapat dipanggil lebih dari satu kali

!   Id (#) Hanya dapat dipanggil satu kali (unik)

! Digunakan untuk mendefinisikan style tertentu pada suatu dokumen.




! Perhatikan direktori folder berikut ini:

!   Di dalam folder “contoh” terdapat file gaya.css yang disebut sebagai dokumen external css



Dokumen HTML yang menggunakan external css

Dokumen CSS yang mendefinisikan style untuk dokumen HTML

Grouping

! Selector Grouping : Menggabungkan beberapa selector yang memiliki CSS Rules yang sama ->h1, h2, h3 {border-style: dashed}

! Property Grouping : Mengatur beberapa property pada 1 selector sekaligus -> p {color: navy; text-align: justify;}

!   Value Grouping : Memberi banyak value pada sebuah property pada CSS Rules -> h1 {font: bold 14pt Arial}



Memasang external CSS ke CI

! Teknik memasang css template pada codeigniter sama halnya dengan transformasi model pemrograman konvensional ke pemrograman berbasis framwork.

! Kuncinya terletak pada pemahaman konsep MVC dan peletakan file dalam susunan folder

!   Yang perlu dipahami pada konsep framework, semua model pemanggilan eksternal file menggunakan metode URL path.



Pertanyaan???



Tugas 6

1.  Buat atau download css template yang sesuai dengan website yang akan Anda buat.

2.  Modifikasi dan pasang css tersebut ke dalam framework CI

3.  Simpan dan masukkan dalam file *.zip



Kriteria pengumpulan tugas ! Tugas 4 dalam bentuk dokumen *.pdf

! Tugas 5 dalam bentuk dokumen php dalam file terkompresi *.zip

! Tugas 6 dalam bentuk dokumen *.css yang telah dimasukkan dalam CI

! Semuanya disimpan dalam 1 folder dengan format !   2016-1_WEB_bpcicss_[prodi]_[kelas]_[NIM]_[Nama]

!   Folder tersebut dicompress menjadi file *.zip dengan nama 2016-1_WEB_bpcicss_[prodi]_[kelas]_[NIM]_[Nama]

! Tugas dikumpul via email paling lambat hari Sabtu, 8 Oktober 2016 jam 23.59 waktu bagian email



peta situs & proses bisnis intro – codeigniter templating...

Documents