1

WEBSITE

Website atau situs juga dapat diartikan sebagai kumpulan halaman yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video dan atau gabungan dari semuanya, baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap, jarang berubah, dan isi informasinya searah hanya dari pemilik website. Bersifat dinamis apabila isi informasi website selalu berubah-ubah, dan isi informasinya interaktif dua arah berasal dari pemilik serta pengguna website. Contoh website statis adalah berisi profil perusahaan, sedangkan website dinamis adalah seperti Facebook, Google Plus, dll. Dalam sisi pengembangannya, website statis hanya bisa diupdate oleh pemiliknya saja, sedangkan website dinamis bisa diupdate oleh pengguna maupun pemilik. Untuk menyediakan sebuah website, maka kita harus menyediakan unsurunsur penunjangnya, seperti halnya: 1. Nama Domain Nama domain atau biasa disebut dengan Domain Name atau URL adalah alamat unik di dunia internet yang digunakan untuk mengidentifikasi sebuah website, atau dengan kata lain domain name adalah alamat yang digunakan untuk menemukan sebuah website pada dunia internet. Contoh http://www.namawebsite.com Nama domain diperjualbelikan secara bebas di internet dengan status sewa tahunan. Setelah Nama Domain itu terbeli di salah satu penyedia jasa pendaftaran, maka pengguna disediakan sebuah kontrol panel untuk administrasinya. Jika pengguna lupa/tidak memperpanjang masa sewanya, maka nama domain itu akan di lepas lagi ketersediaannya untuk umum. Nama domain sendiri mempunyai identifikasi ekstensi/akhiran sesuai dengan kepentingan dan lokasi keberadaan website tersebut.

2

Contoh nama domain ber-ekstensi internasional adalah com, net, org, info, biz, name, ws. Contoh nama domain ber-ekstensi lokasi Negara Indonesia adalah : .co.id

: Untuk Badan Usaha yang mempunyai badan hukum sah

.ac.id

: Untuk Lembaga Pendidikan

.go.id

: Khusus untuk Lembaga Pemerintahan Republik Indonesia

.mil.id

: Khusus untuk Lembaga Militer Republik Indonesia

.or.id

: Untuk segala macam organisasi yang tidak termasuk dalam kategori “ac.id”,”co.id”,”go.id”,”mil.id” dan lain lain

.sch.id

: Khusus untuk Lembaga Pendidikan yang menyelenggarakan pendidikan seperti SD, SMP dan atau SMU

.web.id

: Ditujukan bagi badan usaha, organisasi ataupun perseorangan yang melakukan kegiatannya di World Wide Web.

2. Hosting Hosting atau biasa disebut sebagai web hosting adalah layanan penyewaan ruang simpan data (space) yang digunakan untuk menyimpan data - data website agar halaman website tersebut bisa diakses dari mana saja. Data web tersebut meliputi file - file html, php script, cgi script, css, image, database, dan file lain yang dibutuhkan untuk menampilkan halaman web.

FRAMEWORK DAN MVC Framework yang ditujukan untuk para developer PHP, sebuah toolkit yang memudahkan para programer dalam membangun sebuah aplikasi. Framework adalah kumpulan perintah atau fungsi dasar yang membentuk aturan-aturan tertentu dan saling berinteraksi satu dengan yang lain sehingga dalam pembuatan aplikasi berbasis website, kita harus mengikuti aturan dari framework. Setiap programmer pasti mempunyai style yang berbeda-beda dalam membuat suatu program, ada yang tidak memberikan komentar atau dokumentasi, ada membuat code tidak berarturan, ada yang filenya tersembunyi dan lain-lain. Sehingga

3

pengembangan selanjutnya sulit untuk dilakukan. Maka dari itu dengan adanya framework pengembangan akan sangat mudah dilakukan, dengan catatan developer yang ingin mengembangkan juga harus mengerti dan menguasai framework. Dengan framework (dalam hal ini framework PHP), kita tidak perlu memikirkan kode peintah/fungsi dasar dari aplikasi website kita, seperti sebagaimana mengambil data dari database untuk ditampilkan. Kita hanya memikirkan apa kode sql nya dan ditampilkan kemana ? hal-hal penunjang lainnya seperti koneksi database , validasi form, GUI, dan keamanan telah disediakan oleh framework. Jadi keuntungan yang dapat diperoleh dari penggunaan framework adalah : 1. Waktu pembuatan aplikasi wesite kita jauh lebih singkat. 2. Kode aplikasi website menjadi lebih mudah dibaca, karena sedikit dan sifatnya pokok. 3. Website kita menjadi mudah diperbaiki , karena kita fokus ke semua komponen kode website, terutama kode system framework. 4. Kita tidak perlu lagi membuat kode penunjang aplikasi website seperti koneksi database , validasi form, dan Keamanan. 5. Pikiran kita menjadi lebih terfokus ke kode alur permaslahan website, apa yang ditampilkan dan layanan apa saja yang diberikan dari aplikasi website tersebut. 6. Jika dikerjakah oleh team work , maka akan lebih terarah karena sistem framework, mengharuskan adanya keteraturan peletakan kode . 7. Ringan dan cepat. Framework hanya melakukan pemanggilan pustaka/kelas yang dibutuhkan sehingga meminimalkan resource yang diperlukan sehingga ketika kita me-load sebuah halaman akan menjadi ringan dan cepat. Perlu diketahui Framework PHP yang menganut konsep MVC (model, view, controller) menjadikan pembuatan aplikasi berskala besar menjadi lebih cepat, dan mudah. PHP Framework menggunakan metode pengembangan berbasis MVC. Namun apa itu MVC ? MVC merupakan suatu metode untuk memisahkan bagian-bagian dari

4

suatu web aplikasi. MVC adalah kependekan dari Model View Controller. MVC terdiri dari tiga bagian yaitu; Model : Model mewakili struktur data. Biasanya model berisi fungsi-fungsi yang membantu kita dalam pengelolaan database seperti memasukkan data ke database, update data dan lain-lain. View : View adalah bagian yang mengatur tampilan ke user. Bisa di katakan berupa halaman web. Controller : Controller merupakan bagian yang menjembatani model dan view. Controller berisi script-script php yang berfungsi untuk memproses suatu data dan mengirimkannya ke halaman web.

Dengan kemampuan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan kemampuan developernya, yaitu programmer yang menangani model dan controller, sedangkan designer yang menangani view, sehingga penggunaan arsitektur MVC dapat meningkatkan kestabilan dalam perawatan dan organisasi kode. Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan ditampilkan.

5

CODEIGNITER

Codeigniter adalah sebuah

framework PHP yang dapat membantu

mempercepat developer dalam pengembangan aplikasi web berbasis PHP dibandingkan jika menulis kode program dari awal. Codeigniter bersifat open source dan menggunakan model basis MVC (Model View Controler), yang merupakan model konsep modern saat ini. Codeigniter pertama kali dibuat oleh Rick Ellis, CEO Ellislab, Inc. (http://ellislab.com), lalu pada saat ini, Framework Codeigniter dikembangkan oleh ExpressionEngine Development Team. Saat ini Codeigniter telah mencapai versi 2.1.0 yang dapat di download di http://codeigniter.

Logo Codeigniter

Keuntungan menggunakan Codeigniter, diantaranya: 1. Gratis Codeigntier berlisensi dibawah Apache/BSD opensource, jadi kita bisa menggunakannya secara bebas. 2. Berukuran Kecil Ukuran codeigniter yang kecil merupakan keunggulan tersendiri. Pada codeigniter bisa diatur agar sistem meload library yang dibutuhkan saja, sehingga sistem dapat berjalan ringan dan cepat.

6

3. Menggunakan Konsep MVC Codeigniter menggunakan konsep M-V-C (Model-View-Controller) yang memungkinkan pemisah antara layer application-logic dan presentation . 4. URL yang sederhana. Secara default, URL yang dihasilkan Codeigniter sangat bersih dan Search Engine Friendly (SEF) 5. Memiliki Paket Library yang Lengkap. Codeigniter memiliki library yang lengkap untuk mengerjakan operasi-operasi yang umum dibutuhkan oleh sebuah aplikasi berbasis web, misalnya mengakses database, mengirim email, memvalidasi form, menangani session dan sebagainya. 6. Dokumentasi Lengkap dan Jelas. Codeigniter dilengkapi dengan dokumentasi yang lengkap dan mendukung, agar dapat mudah dimengerti oloeh penggunanya. 7. Komunitas Framework Codeigniter mempunyai sebuah komunitas. Anda dapat bergabung pada situs http://codeigniter.com/forums.

DATABASE Dalam membuat aplikasi berbasis web tentunya kita akan memerlukan sebuah database dalam mengelola data. Data ialah fakta berupa angka, karakter, symbol, gambar, tanda-tanda, isyarat, tulisan, suara, bunyi yang merepresentasikan keadaan sebenarnya yang selanjutnya digunakan sebagai masukan suatu Sistem Informasi. Database ialah

kumpulan data yang disimpan dalam computer secara

sistematis yang dapat diambil dan diperbarui.

7

Sistem Database ialah

komputerisasi system penyimpanan data yang

sistematis sehingga data itu bisa diambil kembali , diperbarui & terjamin keamanan dari pihak-pihak tidak berwenang. Data Base Manajemen Sistem (DBMS) ialah perangkat lunak (software) yang digunakan untuk mengelola database) misalnya : ORACLE, SQL SERVER, TERADATA, MYSQL, SYBASE,DB2, DLL.

MYSQL

MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multiuser, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL.

KEBUTUHAN TOOLS DASAR PEMBUATAN WEB Beberapa tools dasar yang harus dipenuhi, diantaranya : 1. Web Server. Dalam membuat aplikasi yang bersifat dinasmis, tanpa web server, semua yang kita lakukan akan sia-sia. Karena jika tidak ada web server kita tidak dapat mencoba apakah web yang kita buat jalan atau tidak. Disini kita akan

8

menggunakan XAMPP yang dimana didalamnya sudah terdapat webserver apache, dbms mysql dan php. 2. Text Editor. Editor ini berfungsi untuk kita menuliskan skrip program yang akan kita buat. Disini kita akan menggunakan NETBEANS sebagai teks editor PHP. 3. Framework Codeigniter. Codeigniter merupakan file utama dalam membangun aplikasi berbasis Codeigniter, bisa didapatkan di http://codeigniter.com/downloads. 4. Browser. dalam dunia internet adalah software atau alat yang digunakan untuk menjelajah internet. Pengertian browser tersebut sejalan dengan istilah “browse” dalam bahasa inggris yang artinya melihat-lihat atau membaca-baca. Arti browser oleh beberapa kalangan disamakan pula sebagai “perambah”. Beberapa browser cukup terkenal antara lain; 1. Mozilla Firefox 2. Google Chrome 3. Microsoft Internet Explorer 4. Opera 5. Safari dll

INSTALLASI XAMPP

XAMPP merupakan paket webserver lengkap yang terdiri dari apache, mysql dan php. Yang mana ketiga hal diatas merupakan komponen dasar untuk pembuatan website yang paling banyak digunakan, PHP sebagai bahasa pemrograman populer yang biasa digunakan dalam pembuatan sebuah web, kemudian APACHE sebagai web server, dan MYSQL sebagai basis data untuk menangani transaksi website.

9

langsung saja sebelum memulai siapkan terlebih dahulu file instalasi XAMPP. 1. Double click file setup XAMPP.

2. Setelah itu akan muncul tampilan kotak dialog pilihan bahasa.

3. Setelah selesai memilih bahasa akan uncul kotak dialog Selamat Datang di XAMPP 1.7.7 Setup. Klik saja tombol Next Untuk melanjutkan.

10

4. Kemudian dilanjutkan dengan pemilihan lokasi tempat folder hasil installasi berada, secara default setup akan mengarahkan ke folder program files pada drive dimana windows berada, kita dapat mengubah lokasi install dengan mengklik tombol browse pada kolom folder tujuan. Pada contoh ini lokasi berada pada C:\XAMPP. Tekan tombol Next.

5. Setelah itu akan menampilkan pilihan installasi. Berikan centang pada Install Apache as service dan Install MySQL as service lalu tekan tombol Install.

11

6. Setup akan memulai proses ekstraksi file ke folder yang telah ditentukan tunggu hingga muncul konfirmasi

7. Konfirmasi bahwa proses pemasangan/setup telah selesai kemudian klik Finish

12

INSTALLASI NETBEANS Netbeans IDE adalah sebuah lingkungan pengembangan yaitu sebuah perkakas untuk menulis pemrograman, mengompilasi, mencari kesalahan dan menyebarkan program. Netbeans IDE ditulis dalam Java - namun dapat mendukung bahasa pemrograman lain. Sebelum menginstall netbeans maka kita harus menginstall JDK terlebih dahulu cara menginstall JDK adalah sebagai berikut: 1. Klik Double pada Java JDK.

2. Dalam beberapa detik, akan muncul kotak dialog berisi selamat datang lanjutkan saja dengan mengklik next.

13

3. maka prosedur instalasi segera dimulai, ditandai dengan munculnya pilihanpilihan fitur atau komponen yang ingin anda sertakan dalam instalasi. Jika anda ragu mengenai pilihannya, biarkan saja pilihan default atau aslinya, klik Next untuk melanjutkan instalasi.

4. Instalasi Java SDK sedang berproses yang ditandai dengan progress-bar yang menunjukkan status instalasi.

14

5. Setelah progress-bar mendekati 100%, akan dimunculkan pilihan lokasi untuk instalasi JRE6 atau Java Runtime Environment versi 6. JRE6 ini diperlukan pada PC yang hendak menjalankan aplikasi yang dibuat dengan kode Java, kemudian klik next.

6. Instalasi akan berjalan selama beberapa menit, tergantung pada sumber daya PC anda (makin tinggi spesifikasi PC anda, makin cepat instalasi berlangsung).

15

7. Saat instalasi selesai, muncul kotak dialog yang memberitakan bahwa instalasi Java SDK telah selesai. Ada pilihan untuk membuka informasi registrasi produk, atau bisa anda lewatkan dengan mengklik tombol Finish.

Setelah penginstallan java sdk selesai dilanjutkan dengan melakukan penginstallan netbeans yaitu dengan cara: 1. Klik Double pada Netbeans File Stup

16

2. Installer akan membutuhkan waktu beberapa detik untuk mengkonfigurasi dirinya sendiri, lalu setelah itu akan menampilkan selamat datang dan siap melanjutkan instalasi NetBeans. Lanjutkan dengan klik Next

3. Seperti halnya pada instalasi Java SDK atau produk-produk berlisensi lain, installer NetBeans akan menyodorkan halaman persetujuan antara pembuat software dan anda sebagai pemakai. Centang pada check-box berlabel “I accept the terms in the license agreement” sebagai tanda bahwa anda menyetujui dan berniat melanjutkan instalasi, lalu klik tombol Next.

17

4. Kemudian pilihlah lokasi di mana file-file NetBeans akan diinstal.

5. Installer

NetBeans

akan

menampilkan

kembali

lokasi

instalasi

dan

menunjukkan besarnya ruang yang diperlukan. Jika anda sudah yakin, kliklah Next agar instalasi segera dieksekusi.

18

6. Proses instalasi akan berjalan dalam beberapa menit hingga instalasi selesai.

7. Centanglah penawaran bila anda ingin berkontribusi dengan mengijinkan PC anda

mengirimkan

data

untuk

statistik

penggunaan

netbeans

kesitus

netbeans.org, atau jika tidak pun tombol Finish tetap dapat diklik untuk menutup kotak dialog instalasi yang sudah selesai.

19

MEMULAI PROYEK PERTAMA

Untuk memulai proyek pertama masukan file dan folder yang ada didalam folder codeigniter kedirektori xampp/htdocs seperti gambar dibawah ini:

20

Kemudian buka Browser lalu ketik localhost untuk melihat apakah codeigniter telah terpasang jika anda mendapatkan tampilan selamat datang di codeigniter seperti gambar dibawah ini maka codeigniter anda telah terpasang.

Selanjutnya kita akan menghubungkan folder kerja kita kedalam netbeans agar kita dapat melakukan pengeditan maupun penambahan skrip pada codeigniter. 1. Buka aplikasi Netbeans dan pilih menu New Project

21

2. Kemudian pilih kategori PHP dan project PHP Application dan tekan tombol Next.

3. Lalu berikan nama project dan perhatikan source folder yang harus mengarah pada xampp/htdocs sesuai dengan waktu pertama meletakkan file codeigniter. Dan tekan tombol Next.

22

4. Pada tampilan selanjutnya yaitu tampilan run configuration dimana konfigurasi ini memerlukan informasi tentang lokasi alamat proyek. Karena alamat proyek kita berada pada localhots maka kita memasukan http://localhost/ pada inputan Project URL. Kemudian langsung saja menekan tombol Finish

5. Maka sebuah proyek baru yang bernama latihan telah dibuat.

23

PERMULAAN BEKERJA DENGAN CODEIGNITER

1. Mengedit File Config

2. Mengedit File Routes

3. Pada Controller beranda ketik skrip berikut:

24

4. Pada View beranda_view ketik skrip berikut:

5. Maka akan didapatkan hasil seperti gambar dibawah ini:

6. Menambahkan Menu Tab. Tambahkan helper url dan html pada file autoload

25

7. Edit file beranda_view menjadi seperti dibawah ini:

8. Sehingga tampilan web akan menjadi seperti dibawah ini:

26

MENGGUNAKAN FRAMEWORK BLUEPRINT CSS

Dengan menggunakan blueprint css kita dapat merapikan sebuah tampilan website. Masukan blueprint css kedalam folder project.

Dan ubah skrip file beranda_view menjadi seperti ini:

Sehingga tampilan akan berubah menjadi seperti ini:

28

MEMBUAT TEMPLATE SKRIP Membuat tempalte skrip header, footer dan menu agar tidak mengulang skrip yang sudah dibuat sehingga skrip yang sudah dibuat dapat dipergunakan kembali pada halaman lainnya: 1. Buat Folder Includes dan Object pada folder views

2. Lalu tambahkan file header dan footer dalam folder includes juga file main_menu pada folder object.

3. Masukan skrip ini pada header

29

4. Lalu skrip ini pada footer:

5. Dan skrip menu pada file main_menu

6. Setelah itu file beranda_view akan di ubah menjadi seperti berikut:

MEMBUAT DATABASE

Membuat

database

untuk

menyimpan

data

buku

http://localhost/phpmyadmin untuk membuat database dan table.

tamu,

buka

30

Lalu pilih Tab Menu Databases lalu buat database yang bernama dblatihan seperti gambar dibawah ini:

Kemudian dilanjutkan dengan membuat tabel yang diberi nama tbbuku_tamu yang terdiri dari 4 kolom yaitu id, nama, email dan komentar.

31

Pada id di set sebagai primary key dan auto increnmet

Setelah itu tekan tombol save untuk menyimpan sehingga akan terlihat struktur tabel tbbuku_tamu:

32

CREATE, READ, UPDATE AND DELETE (CRUD)

CRUD adalah fasilitas menambah data, membaca data, mengganti data dan menghapus data yang akan kita buat pada website. Pada sesi ini akan dibawas dimulai dari menambah data buku tamu lalu membaca data buku tamu kemudian mengganti data buku tamu dan menghapus buku tamu. Dimana didalamnya juga ada pembahasan mengenai pembuatan form dan tabel. Contoh Form:

33

Skrip Form ini: