Anda di halaman 1dari 48

Proposal Pembuatan Website 4IA09news

Ketua kelompok : Faisal Reza 50408330 Anggota : Gigih Aryo Prakoso 50408394 Ade Rana Pagan 50408023 Bastian Putra jaya 50408186 Tezhar Mufti A. 50408827

Universitas Gunadarma 2012

1. Fase Perencanaan/Planning/Proposal

a. Pendefinisian Masalah Kebutuhan komunikasi antar anggota komunitas semakin tinggi akibat keadaan hidup yang semakin sibuk dengan urusan pribadi. Namun, disamping hal itu keinginan untuk berbagi sesama anggota juga tetap ada dan ingin dilakukan secara berkelanjutan. Oleh karena itu, dibutuhkan sebuah wadah dalam bentuk media komunikasi bersifat solutif(murah, powerful, dan simple). Bentuk yang diharapkan adalah situs berita yang bisa diisi oleh setiap pengguna(user/anggota).

b. Tujuan Tujuan dari pembuatan web ini adalah untuk memberikan informasi kepada pengguna mengenai komunitas yang menjadi tema pada web tersebut. Web tersebut akan berisi hal-hal yang menarik dan ciri khas dari komunitas tersebut. Dengan adanya informasi mengenai komunitas tersebut diharapkan para pengguna atau pembaca web tersebut akan tertarik untuk turutserta pada kegiatan yang diselenggarakan oleh komunitas tersebut, misalnya untuk hadir pada saat komunitas mengadakan acara yang dapat meningkatkan tali silaturahim antar user atau penggunannya.

c. Target pengguna akhir Target pengguna akhir web ini adalah mahasiswa 4ia09 pada khususnya dan mahasiswa gunadarma pada umumnya. Untuk itu nantinya web ini akan didesign agar cocok untuk digunakan oleh mahasiswa pada khususnya dan masyarakat umum pada umumnya.

d. Faktor kelayakan

(i)

Kelayakan Teknologi/teknis Dari berbagai media yang dapat digunakan, terpilihlah media web berbasis: Untuk tampilan end user dan admin digunakan template berbasis html css dan javascript untuk membangunnya

Untuk fungsi setiap halaman dibangun dengan Framework codeigniter (berbasis php 5 dan html)

Untuk database digunakan mySQL IDE codelobseter free user Filezilla 000webhost.com untuk pihak penyelenggara server sekaligus pihak penyelenggara domain.

Semua teknologi di atas digunakan versi terbaru dan teknologi terkini.

Adapun CodeIgniter adalah aplikasi open source yang berupa framework dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat aplikasi web dengan cepat dan mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi terakhir adalah 2.1.0 dapat dilihat di website resminya (ada dibagian akhir tulisan ini).

Sebelum membahas lebih jauh tentang salah satu framework PHP ini, mungkin kalian ada yang masih bingung apa itu Framework, apa itu VMC (Model, View, Controller)?

Framework secara sederhana dapat diartikan kumpulan dari fungsifungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang pemrograman, tanpa harus membuat fungsi atau class dari awal.

Ada beberapa alasan mengapa menggunakan Framework:

Mempercepat dan mempermudah pembangunan sebuah aplikasi web.

Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada)

Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal (misalnya validasi, ORM, pagination, multiple database, scaffolding,

pengaturan session, error handling, dll

Lebih bebas dalam pengembangan jika dibandingkan CMS MVC (Model View Controller). Model View Controller merupakan suatu konsep yang cukup populer dalam pembangunan aplikasi web, berawal pada bahasa pemrograman Small Talk, MVC memisahkan pengembangan aplikasi berdasarkan komponen utama yang membangun sebuah aplikasi seperti manipulasi data, user interface, dan bagian yang menjadi kontrol aplikasi. Terdapat 3 jenis komponen yang membangun suatu MVC pattern dalam suatu aplikasi yaitu : 1. View, merupakan bagian yang menangani presentation logic. Pada suatu aplikasi web bagian ini biasanya berupa file template HTML, yang diatur oleh controller. View berfungsi untuk menerima dan merepresentasikan data kepada user. Bagian ini tidak memiliki akses langsung terhadap bagian model. 2. Model, biasanya berhubungan langsung dengan database untuk memanipulasi data (insert, update, delete, search), menangani validasi dari bagian controller, namun tidak dapat berhubungan langsung dengan bagian view. 3. Controller, merupakan bagian yang mengatur hubungan antara bagian model dan bagian view, controller berfungsi untuk menerima request dan data dari user kemudian menentukan apa yang akan diproses oleh aplikasi. Dengan menggunakan prinsip MVC suatu aplikasi dapat dikembangkan sesuai dengan kemampuan developernya, yaitu programmer yang menangani bagian model dan controller, sedangkan designer yang menangani bagian view, sehingga

penggunaan arsitektur MVC dapat meningkatkan maintanability dan organisasi kode. Walaupun demikian dibutuhkan komunikasi yang baik antara programmer dan designer dalam menangani variabel-variabel yang akan ditampilkan. Ada beberapa kelebihan CodeIgniter (CI) dibandingkan dengan Framework PHP lain,

Performa sangat cepat : salah satu alasan tidak menggunakan framework adalah karena eksekusinya yang lebih lambat daripada PHP from the scracth, tapi Codeigniter sangat cepat bahkan mungkin bisa dibilang codeigniter merupakan framework yang paling cepat dibanding framework yang lain.

Konfigurasi yang sangat minim (nearly zero configuration) : tentu saja untuk menyesuaikan dengan database dan keleluasaan routing tetap diizinkan melakukan konfigurasi dengan mengubah beberapa file konfigurasi seperti database.php atau autoload.php, namun untuk menggunakan codeigniter dengan setting standard, anda hanya perlu merubah sedikit saja file pada folder config.

Banyak komunitas: dengan banyaknya komunitas CI ini, memudahkan kita untuk berinteraksi dengan yang lain, baik itu bertanya atau teknologi terbaru.

Dokumentasi yang sangat lengkap : Setiap paket instalasi codeigniter sudah disertai user guide yang sangat bagus dan lengkap untuk dijadikan permulaan, bahasanya pun mudah dipahami.

Dan banyak lagi yang lainnya.

(ii)

Kelayakan Ekonomi Untuk proyek ini diestimasi dana yang dibutuhkan sebesar Rp 1500.000,00 yang digunakan untuk : Tim yang terdiri dari 2 orang yang terdiri dari ketua tim dan asisten programmer yang membantu proses pengkodean. Ketua tim bertindak sebagai system analis, programmer inti dan pengatur

keuangan. Sedangkan asisten programmer dapat membantu ketua tim untuk membuat fungsi-fungsi pendukung agar web bisa lebih rapi. Biaya operasional yang digunakan untuk observasi lapangan dan pembuatan angket

(iii)

Kelayakan Legal Dari segi legel, web ini dibuat dengan account free, yang disebarkan oleh penyelenggara aplikasi sehingga web yang dibuat juga dijamin kelegalannya. Untuk domain yang digunakan disediakan oleh pihak server sehingga juga dijamin kelegalannya.

(iv)

Kelayakan Operasional Untuk mengimplementasikannya tim yang terdiri dari 2 orang personil diharapakan sudah cukup untuk melaksanakan semua pekerjaan yang ada.

(v)

Kelayakan rencana Untuk proyek ini diharapakan dapat selesai dalam waktu 1 bulan.

(vi)

Kelayakan keamanan Web ini dibuat dengan menggunakan CI yang didalamnya sudah terinclude enkripsi md5 yang siap dipanggil untuk berbagai kebutuhan. Dan pada web ini enkripsi dilakukan pada log in form. Jadi usaha untuk menjebol menggunakan brute force diharapkan sulit.

(vii)

Kelayakan fungsi Web yang akan dibuat merupakan web berbasis informasi komunitas yang bisa disebut berita menengenai komunitas dan liputan-liputan berita terbaru dan kegiatan-kegiatan yang dilakukan dan akan dilakukan komunitas, untuk itu ada beberapa fungsi yang tim tawakan, yaitu :

Timeline Merupakan susunan berita terbaru yang diinput kedalam database yang ditampilkan pada halaman-halaman yang ditentukan. Aturan-aturan yang ada bisa ditentukan sesuai dengan permintaan pemilik proyek.

Berita dalam kategori Berita akan dipisahkan sesuai kategori yang ditentukan pada saat input berita ke database.

Admin panel Admin panel disediakan untuk menginput,edit dan mengawasi input data dengan fungsi-fungsi yang disiapkan untuk memudahkan seorang admin/pengelola dari web nantinya.

Tampilan yang menarik Dibuat dengan mengkombinasikan javascript, css dan html sehingga tampilan terlihat menarik.

(viii) Kelayakan data Data awal diambil dengan observasi yang dilakukan tim, kemudian data awal mulai diterapkan sampai pada proses prototype. Selanjutnya data akan diseleksi oleh admin yang ditentukan pemilik proyek.

(ix)

Kelayakan tampilan Tampilan yang ditawarkan secara garis besar adalah sebagai berikut :

Home

Header Menu

Foto dan info news singkat(jquery, tampilan menarik)

Box news 1

Box news 2

Box news 3

Footer Menu

Di atas merupakan tampilan utama yang ditawarkan, selain dari ini masih ada tampilan lain yang ditawarkan, yang akan diberikan pada saat proyek diresmikan.

(x)

Kelayakan layanan Setelah proyek selesai, maka pihak tim akan memberikan pelatihan untuk admin yang ditunjuk oleh pihak penyelenggara untuk menjalankan system. Tim akan mengawasi kerja media pada waktu yang ditentukan sesuai kesepakatan tim dan pihak penyelenggara proyek.

e. Jadwal Pelaksanaan dan Metode Pembuatan Untuk mengerjakan project ini diperkirakan akan memerlukan waktu selama 1 bulan. Dalam waktu satu bulan terbagi beberapa termin, yaitu :

(i)

Tahap awal

Berlangsung selama 1 minggu, dalam minggu pertama ini dapat digunakan untuk memilih tools yang akan digunakan dalam merangkai kode yang akan dibuat. Dalam tahap ini juga digunakan untuk membuat angket (isinya bisa opini dan visi kedepan mengenai komunitas ini) yang akan disebarkan kepada setiap anggota dan dilanjutkan dengan menyebarkannya pada minggu yang sama. (ii) Tahap tengah

Berlangsung selama 2 minggu, dalam minggu ini sudah dibuat tampilan-tampilan yang akan digunakan dalam web nantinya. Dilanjutkan dengan pembuatan fungsi-fungsi yang sudah disebutkan sebelumnya. (iii) Tahap akhir

Berlangsung di minggu terakhir, tim sudah menyerahkan prototype web yang dibuat. Revisi dan perbaikan dan tambahan bisa dilakukan di tahap ini. Namun dalam pelaksanaannya dapat dilaksanakan dalam waktu yang bersamaan seperti ditampilkan table di bawah ini : Pekerjaan Tahap 1 Tahap 2 Tahap 3 Minggu 1 Minggu 2 Minggu 3 Minggu 4

f. Mencari Staff Untuk asisten programmer di dapat dari rekan kerja yang biasa sudah bekerja bersama dengan programmer inti. g. Meresmikan proyek Ketika proposal yang diajukan diterima maka selanjutnya adalah tahap pengerjaan oleh tim yang sudah dibentuk sebelumnya dan diselesaikan sesuai dengan tenggat waktu yang sudah disepakati sebelumnya

2. Fase Analisa

a. Mengumpulkan Informasi Informasi merupakan object vital bagi aplikasi apapun yang akan dibuat, untuk itu dalam pembuatan web ini dari diadakan berbagai survey ke pengguna agar media ini lebih mudah digunakan oleh user nantinya. Adapaun servey yang dilakukan dalam bentuk sebagai berikut : (i) Melakukan observasi yang hasilnya menunjukkan seberapa besar penggunanya mengerti system internet bekerja karena nantinya web ini akan dikembalikan kepada penggunanya untuk digunakan. (ii) (iii) (iv) Membuat angket bermaterikan opini dan visi kedepan setiap anggota, Melakukan liputan khusus mengenai komuitas, Mengolah dan mengarahkan permohonan pemilik project akan tujuan menjadi sebuah data, sehingga dapat dijadikan materi dalam web tersebut nantinya. Untuk berita yang akan ditampilkan pada web ini, di upload(unggah) oleh admin atau user yang diberi kewenangan. Tim tidak bertanggung jawab atas informasi yang ditampilkan nantinya.

b. Mendefinisikan Kebutuhan Dari informasi yang didapatkan tim dari penyelenggara proyek dan penggunanya nanti, di dapat fungsi yang diharapkan olehnya, adapun gambarannya adalah sebagai berikut :

(i)

Tampilan yang menarik Tampilan yang menarik adalah tampilan yang terlihat bersahabat di mata penggunanya(user friendly), terdapat efek-efek khusus yang interaktif dan menampilkan karakteristik dari komunitasnya itu sendiri.

(ii)

Timeline (output berita terbaru) Timeline merupakan update berita terkini, dimana berita yang diinput oleh admin atau user(yang diberi hak untuk menginput berita) ditampilkan tanpa memperdulikan jenis berita yang ditampilkan nantinya.

(iii)

Kategori (semua input yang masukkan berada dalam kategori-kategori yang ditentukan pemilik project. Dari berita yang diinput terdapat kategori-kategori yang disediakan, misalkan ada tiga kategori maka semua berita di kategori 1 akan ditampilkan di semua berita berkategori 1 dalam satu page. Begitu juga kategori dua dan kategori tiga, memiliki tempatnya masing-masing.

(iv)

Post komentar (bisa memposting komentar dengan terlebih dahulu login sebagai listed user)

Dalam setiap berita dapat diberikan kometar yang dilakukan user setelah user log in.

(v)

Admin panel Dalam web ini juga disediakan admin panel, dimana admin panel ini dibuat untuk admin dan user yang di beri hak untuk mengelola data informasi/news, konten, komentar dan userdata.

(1) Input konten Disini admin dan user yang diberi hak dapat menginput berita yang akan ditampilkan. Dalam tampilan ini disisipkan javascript burupa text editor(membuat font-style, membuat perataan text, bullets and numbering, dll.) yang dapat membuat user mudah untuk melakukan proses edit text.

(2) Edit konten Fungsi ini memberikan kemudahan dalam memperbaiki isi konten.

(3) Delete konten Fungsi ini dapat digunakan untuk menghapus konten.

(4) Delete komen Fungsi ini dapat digunakan untuk menghapus komentar yang sudah diberikan.

(5) Edit hak user Agar user bisa mengakses form komentar user harus diberi hak akses, pada bagian ini admin bisa memberika hak akses atau mengedit hak akses user.

(vi)

Log in panel Untuk masuk ke admin panel terlebih dahulu user harus terdaftar sehingga memiliki username dan password yang dapat dimasukkan ke log in panel.

c. Perancangan prototype Sebelum media ini dilaunching, dilakukan pemodelan berupa prototype. Prototype dibuat berdasarkan kebutuhan yang sudah dijelaskan sebelumnya. Prototype tersebut akan disebarkan ke beberapa user dan selanjutnya dilakukan identifikasi kekurangan yang diberikan oleh user, sehingga media ini dapat disempurnakan sebelum diluncurkan, adapun form pencatatan kekurangan atau check media requirement, adalah : Form check media requirement Layanan User Tampilan yang menarik 1 2 3 Timeline Kategori Komentar Admin panel Login Panel

4 5 20 Setelah prototype disebarkan dan diambil datanya maka dapat dilakukan kegiatan untuk menentukan requirement function. d. Requirement function

(i) Kebutuhan Fungsional (Functional requirement) Functional requirement adalah jenis requirement yang berisi: a. Proses-proses yang harus dilakukan oleh sistem Adapun proses-proses yang harus dilakukan oleh system adalah sebagai berikut : Sistem harus dapat melakukan entri berita yang berhubungan dengan pendataan berita i. ii. Admin/user yang diberi hak dapat membuat berita terbaru Admin dapat menampilkan seluruh berita yang berada dalam basis data iii. Admin dapat menyeleksi berita yang akan dan sudah tampil untuk menilai kelayakannya. iv. Admin/user yang diberi hak dapat menginput berita berdasarkan karegori v. Admin dapat menampilkan seluruh komentar yang berada dalam basis data

Sistem harus dapat melakukan edit berita yang sudah ada i. ii. iii. Admin dapat mengedit berita yang sudah dibuat Admin dapat menghapus berita Admin dapat menghapus komentar yang dianggap tidak layak

Sistem harus dapat melakukan edit entri anggota yang berhubungan dengan pendataan anggota

i. ii.

Admin dapat menampilkan data seluruh anggota Admin dapat menyeleksi user yang berhak dan tidak berhak menjadi anggota

iii.

Admin dapat menghapus data keanggotaan

Sistem harus dapat menampilkan informasi untuk guest user (user tamu) / listed user (user terdaftar)

i. ii. iii. iv. v. vi.

User dapat melihat seluruh entri dalam sebuah page end-user User tamu hanya dapat membaca artikel User terdaftar dapat melihat komentar User terdaftar dapat melakukan entri komentar User dapat melihat entri per kategori User dapat dibedakan user terdaftar dengan user tamu

b. Informasi-informasi yang harus ada di dalam sistem Sesuai dengan permintaan pemilik proyek informasi yang harus ada dalam sistem dibagi dua : (a) Userdata Dalam userdata, terdapat informasi berupa username, password, nama lengkap, alamat email, alamat rumah.

(b) News Untuk informasi ini, informasi ini dikategorikan berdasarkan jenis konten yang terdiri dari :

Gosip Dalam kategori ini diisikan hal-hal yang menarik, tidak sengaja terjadi atau kenyataan yang dapat menarik perhatian.

Infokuis Kategori ini akan sangat berguna bagi mahasiswa yang sedang bekerja atau berhalangan hadir dan dapat menjadi bahan untuk ujian

Pelajaran Bagian ini akan menyampaikan pelajaran-pelajaran yang dapat dibaca kembali oleh user baik guest ataupun listed user.

(ii) Nonfunctional Requirements Adalah tipe requirement yang berisi properti perilaku yang dimiliki oleh sistem, meliputi: Operasional a. Browser yang dapat menjalankan javaScript b. Server yang dapat menagani php versi 5 c. 128 MB 256 MB of RAM

Security a. Terdapat system admin-user-guest, akses dibatasi untuk setiap user b. Dilengkapi enkripsi password md5 saat daftar dan log in user. c. User tidak terverifikasi tidak dapat melihat komentar dan input komentar. d. Dapat menginformasikan apabila password yang di masukkan oleh user salah e. Digunakan untuk menampilkan prosedur pendaftaran anggota baru

3. Fase Perancangan

a. Merancang arsitektur media Pada bagian ini akan ditampilkan struktur navigasi yang menampilkan secara garis besar arsitektur media yang akan dibuat. Karena terdapat dua tampilan, maka akan dibuat dua buah struktur navigasi, yaitu : 1. Struktur navigasi untuk user interface Adapun strukturnya adalah sebagai berikut :

2. Struktur navigasi untuk system interface Adapun strukturnya adalah sebagai berikut :

b. Logical Design

Pada bagian ini ditampilakn ERD yang menjadi panutan dalam pembuatan lalulintas data dalam bentuk logika, seperti ditampilkan pada gambar dibawah ini :

(i) Deskripsi fungsional mengenai data dan proses yang ada dalam sistem baru. Deskripsi yang detail dari spesifikasi sistem meliputi:

Input Semua proses input haruslah terdaftar sebagai user yang sudah terverifikasi oleh admin, oleh karena itu dapat dilihat bahwa userdata dapat melakukan input news dan input komentar.

Output Begitu pula output userdata juga dapat melihat hasil inputnya dan menampilkan komentar yang sudah ada sekaligus.

Process Proses yang terjadi terbagi tiga jenis, yaitu : a. Input news Dilakukan oleh admin/user yang diberi hak b. Input komentar Dilakukan oleh admin/user yang diberi hak c. Lihat berita dan komentar Untuk lihat komentar dilakukan oleh admin/user yang diverifikasi, untuk lihat berita bisa dilakukan oleh semua user baik user guest maupun listed user.

Dari ERD di atas juga dapat dilihat bagaimana setiap data disimpan. Data sendiri disimpan dalam sebuah database dengan nama 4ia09news dengan 3 table dengan 17 field di dalamnya.

c. Physical design

Dalam design fisik dibagi menjadi 2 bagian besar system interface dan user interface, yang akan diterangkan sebagai berikut :

Mendesain user interface

User interface dibagi menjadi 6 bentuk interface, yang terdiri dari : Home

Header Menu

Foto dan info news singkat(jquery, tampilan menarik)

Box news 1

Box news 2

Box news 3

Footer Menu

Dalam home terdapat berita-berita tentang komunitas yang diganti setiap bulan sekali, penggantian dilakukan dalam kode secara langsung yang dilakukan oleh

administrator. Pada gambar di atas terdapat beberapa box yang diterangkan sebagai berikut :

Header Dalam header terdapat terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Home, arsip, gossip, pelajaran, info kuis, tentang dan masuk(log in user).

Foto dan info Dalam bagian ini terdapat tampilan yang terlihat menarik karena disisipkan jquery untuk melakukan pergeseran foto(slide).

Box news 1 Berita di sini merupakan potongan berita. Dengan menekan readmore dapat dilihat keseluruhan berita.

Box news 2 Berita di sini merupakan potongan berita. Dengan menekan readmore dapat dilihat keseluruhan berita.

Box news 3 Berita di sini merupakan potongan berita. Dengan menekan readmore dapat dilihat keseluruhan berita.

Footer menu Dalam footer terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Home, arsip, gossip, pelajaran, info kuis, tentang.

(2) Timeline interface

Header Menu

Timeline berita

Footer Menu

Tampilan ini ditampilkan pada menu arsip dan semua kategori dimana, aturannya berikut : General(untuk semua tampilan yang menggunakan timeline)

sebagai

1. Setiap page menampilkan 5 berita terbaru. 2. Setiap berita dipotong sepanjang 70 kata yang selanjutnya dapat dibaca dengan menekan lihat selengkapnya. 3. Header Dalam header terdapat terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Home, arsip, gossip, pelajaran, info kuis, tentang dan masuk(log in user). 4. Footer menampilkan menu yang sama seperti sebelumnya telah dijelaskan

5. Apabila berita lebih dari lima dilakukan pagination sehinngga ada page selanjutnya yang menampilkan berita yang lebih lama. Khusus (untuk page kategori dianataranya : gossip, pelajaran dan infokuis)

1. Setiap page ditampilkan berdasarkan kategori, yaitu : 1. Gossip, 2. Pelajaran dan 3. Infokuis 2. Setiap page menampilkan semua konten dengan kategori masing-masing secara lengkap. 3. Aturan lain selebihnya sama dengan aturan umum(general). (3) Konten interface

Header Menu

Konten

Komentar

Footer Menu

Dalam konten interface terbagi 4 bagian, yaitu : 1. Header menampilkan menu yang sama seperti sebelumnya telah dijelaskan. 2. Footer menampilkan menu yang sama seperti sebelumnya telah dijelaskan 3. Konten area menampilkan keseluruhan berita yang sebelumnya di potong dalam timeline. Untuk mencapai halaman ini dapat dilakukan dengan 2 cara, klik tombol lihat selengkapnya atau klik judulnya.

4. Komentar akan tampil ketika user log in tanpa log in user tidak akan dapat melihat area ini.

(4) Log in interface h.

Username Password

: : submit

Belum punya ID? Forgot password

Dalam log in interface terdapat 5 bagian yang digunakan oleh user untuk berinteraksi dengan system, yaitu : 1. Text box username Dalam text box ini akan diinput username yang telah di daftarkan dan diverifikasi 2. Text box password Dalam text box ini akan diinput password yang telah di daftarkan dan diverifikasi 3. Submit button Button ini akan menjalankan action yang berada dalam controller admin/proses. 4. Link untuk daftar user(sign up) Link ini akan menghubungkan ke page sign up 5. Link untuk lupa password Link ini akan menghubungkan ke page lupa password

(5) Sign Up form (6)

Username Password Nama Email Alamat Clear

: : : : : Sign Up
Back to login

Dalam form signup di atas terdapat 8 bagian yang digunakan oleh user untuk berinteraksi dengan system, yaitu : 1. Text box username Dalam text box ini akan diinput username yang akan didaftarkan 2. Text box password Dalam text box ini akan diinput password yang akan didaftarkan 3. Text box nama Dalam text box ini akan diinput nama user yang akan didaftarkan 4. Text box email Dalam text box ini akan diinput email user yang akan didaftarkan 5. Text box alamat Dalam text box ini akan diinput email user yang akan didaftarkan 6. Sign up button Button ini akan menjalankan action yang berada dalam controller admin/daftar. 7. Clear button

Button ini akan menjalankan perintah untuk mengosongkan form pendaftaran. 8. Link untuk kembali ke log in Link ini akan menghubungkan ke page log in.

(6) Lupa password

Please send us your email and we'll reset your password. Email address : Kirim Email
Back to login

Dalam form signup di atas terdapat 3 bagian yang digunakan oleh user untuk berinteraksi dengan system, yaitu : 1. Text box email Dalam text box ini akan diinput email user yang akan didaftarkan 2. Sign up button Button ini akan menjalankan perintah untuk mengerimkan password kepada email yang input oleh user, jika user dengan username tersebut terdaftar maka permintaan lupa password akan ditanggapi selebihnya tidak dilayani. 3. Link untuk kembali ke log in Link ini akan menghubungkan ke page log in. Mendesain system interface

User interface dibagi menjadi 6 bentuk interface, yang terdiri dari :

Input konten

Judul web Konten input Edit

Header Komentar User management

Judul Kategori Tanggal Berita

Submit Footer Footer

Pada setiap halaman admin, setiap menu akan aktif ketika berada dalam sebuah halaman, pada tampilan di atas ditunjukkan bahwa halaman yang sedang aktif adalah halaman input konten. Dalaman halaman konten terdapat 7 bagian yang diterangkan sebagai berikut :

Header Dalam header terdapat terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Konten Input, Edit, Komentar, User Management. Selain itu terdapat link pada judul web yang menghubungkan halaman admin dengan halaman user. Header menu akan berubah warnanya ketika satu halaman aktif.

Text box judul

Dalam text box ini akan diinput judul yang akan diinput oleh admin/user berhak.

Select bar kategori Pada tampilan ini dapat dipilih kategori-kategori yang disediakan developer

Input Tanggal Pada bagian ini, disediakan input berupa tanggal yang datanya diambil dari kode php untuk menentukan tanggal pada saat pengunggahan.

Textarea berita Pada bagian ini, disediakan textarea untuk menginput data berupa berita, di dalam bagian ini juga disisipkan javascript tiny mce untuk menampilkan editor text seperti : bold, italic, underline, perataan text, dll.

Submit Button ini akan menjalankan action yang berada dalam controller admin/tambah_berita.

Footer Bagian ini hanya memberikan kesan menarik pada tampilan keseluruhan, tidak memberikan link untuk berpindah ke halaman lain.

(2) Edit

Judul web Konten input Edit

Header Komentar User management

Artikel terbaru Judul Xxxx Xxxx Date yyyy/mm/dd yyyy/mm/dd Added by user user Content Control delete edit delete edit

Footer Footer

Pada setiap halaman admin, setiap menu akan aktif ketika berada dalam sebuah halaman, pada tampilan di atas ditunjukkan bahwa halaman yang sedang aktif adalah halaman input konten. Dalaman halaman konten terdapat 3 bagian yang diterangkan sebagai berikut :

Header Dalam header terdapat terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Konten Input, Edit, Komentar, User Management. Selain itu terdapat link pada judul web yang menghubungkan halaman admin dengan halaman user. Header menu akan berubah warnanya ketika satu halaman aktif.

List artikel terbaru Dalam list artikel terbaru ditampilkan list seluruh enrti berita. Dalam list berita disediakan content control yang disetiap baris terdapat

fungsi pengaturan konten berupa edit dan delete. Jika edit dipilih maka akan kembali ke halaman input konten dengan fungsi submit untuk update data, sehingga tidak aka nada id_judul baru di database. Sedangkan delete dapat digunakan untuk menghapus konten yang dikehendaki.

Footer Bagian ini hanya memberikan kesan menarik pada tampilan keseluruhan, tidak memberikan link untuk berpindah ke halaman lain.

(3) Komentar

Judul web Konten input Edit

Header Komentar User management

Komentar Komentar Xxxx Xxxx Nomor judul yyyy/mm/dd yyyy/mm/dd Added by user user Content Control delete delete

Footer

Pada setiap halaman admin, setiap menu akan aktif ketika berada dalam sebuah halaman, pada tampilan di atas ditunjukkan bahwa halaman yang sedang aktif adalah halaman input konten. Dalaman halaman konten terdapat 3 bagian yang diterangkan sebagai berikut :

Header Dalam header terdapat terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Konten Input, Edit, Komentar, User Management. Selain itu terdapat link pada judul web yang menghubungkan halaman admin dengan halaman user. Header menu akan berubah warnanya ketika satu halaman aktif.

List komentar terbaru Dalam list komentar ditampilkan list seluruh enrti komentar. Dalam list komentar disediakan content control yang disetiap baris, adapun fungsi yang disediakan adalah pengaturan komentar berupa delete. Delete dapat digunakan untuk menghapus komentar yang

dikehendaki. Terdapat jugu Footer Bagian ini hanya memberikan kesan menarik pada tampilan keseluruhan, tidak memberikan link untuk berpindah ke halaman lain. (4) User management

Judul web Konten input Edit

Header Komentar User management

Daftar Anggota Nama Xxxx Xxxx Email yyyy/mm/dd yyyy/mm/dd Hak user user Content Control delete edit delete edit

Footer Footer

Pada setiap halaman admin, setiap menu akan aktif ketika berada dalam sebuah halaman, pada tampilan di atas ditunjukkan bahwa halaman yang sedang aktif adalah halaman input konten. Dalaman halaman konten terdapat 3 bagian yang diterangkan sebagai berikut :

Header Dalam header terdapat terdapat menu yang memiliki fungsi untuk menghubungkan setiap page seperti : Konten Input, Edit, Komentar, User Management. Selain itu terdapat link pada judul web yang menghubungkan halaman admin dengan halaman user. Header menu akan berubah warnanya ketika satu halaman aktif.

List User Dalam list user ditampilkan list seluruh enrti userdata. Dalam list user disediakan content control yang disetiap baris, adapun fungsi yang disediakan adalah pengaturan userdata berupa delete dan edit. Delete dapat digunakan untuk menghapus komentar yang

dikehendaki. Terdapat juga hak akses yang menampilkan hak yang diberikan admin kepada user yang mendaftar.

Footer Bagian ini hanya memberikan kesan menarik pada tampilan keseluruhan, tidak memberikan link untuk berpindah ke halaman lain.

d. Merancang dan mendesain database Database dirancang menggunakan data flow diagram yang dibagi menjadi 3 level yang didefiniskan sebagai berikut :

Pada level 0

Keterangan Gambar : User : entitas luar(user), baik user guest atau user terdaftar.

Admin : entitas luar Administrator web Data user dari user ke system informasi : Meliputi Nama, email, username, password, alamat Data komentar dari user ke system informasi : Meliputi Nama, email, komentar Data berita dari system informasi ke user: Meliputi judul, penulis, tanggal upload, konten berita Data berita dari admin ke system informasi : Meliputi judul, tanggal upload, konten berita, kategori Pada level 1

Pada level ini system informasi dipecah ke dalam 5 bagian proses, yang terdiri dari : 1. Lihat berita Disini proses menarik data pada table news untuk ditampilkan ke user. Yang meliputi judul, penulis, tanggal upload, konten berita. 2. Input komentar Disini proses memasukan data ke table komentar untuk ditampilkan ke user yang ditempelkan pada view konten utama(berita sesuai id_judul). Yang meliputi Meliputi Nama, email, komentar, id_judul 3. Seleksi Disini proses menerima dan mengembalikan data ke table masingmasing serta mengirim dan menerima data ke dan dari admin. Proses seleksi ini digunakan untuk menyeleksi data yang masuk dari segi kelayakan dan kualitas data(quality control) 4. Input berita Disini proses memasukan data ke table news untuk ditampilkan ke user yang ditempelkan pada konten utama(berita sesuai id_judul). Yang meliputi Meliputi judul, penulis, tanggal upload, konten berita, kategori.

5. Daftar anggota Disini proses memasukan data ke table userdata untuk ditampilkan ke admin dimana sebelumnya melewati tahap seleksi sehingga user yang terdaftar bukanlah user yang tidak diinginkan. Yang meliputi Meliputi Nama, email, username, password, alamat.

Pada level 2

Pada level ini seleksi dipecah ke dalam 3 bagian proses, yang terdiri dari : 1. Seleksi biarkan Disini proses menerima dan mengembalikan data ke table masingmasing serta mengirim dan menerima data ke dan dari admin. Proses seleksi ini digunakan untuk menyeleksi data yang dianggap layak untuk dipertahankan keberadaannya.

2. Seleksi hapus Disini proses menerima dan mengembalikan data ke table masingmasing serta mengirim dan menerima data ke dan dari admin. Proses seleksi ini digunakan untuk menyeleksi data yang dianggap tidak layak untuk dipertahankan keberadaannya.

3. Seleksi edit Disini proses menerima dan mengembalikan data ke table masingmasing serta mengirim dan menerima data ke dan dari admin. Proses seleksi ini digunakan untuk menyeleksi data yang dianggap layak namun untuk dipertahankan keberadaannya harus dilakukan sedikit perubahan.

e. Membuat prototype untuk detail dari desain Dari semua desain tampilan dan database yang telah dibuat sebelumnya. Dibuatlah tampilan interface yang lebih jelas(prototype) agar gambaran untuk pengguna lebih jelas terlihat dan dapat dilaporkan ke pihak penyelnggara agar hasil lebih memuaskan. Adapun prototype dari web ini adalah sebagai berikut :

(i) Home

(ii) Timeline(arsip, gossip, pelajaran dan info kuis)

\ (iii) Halaman log in

(iv) Halaman sign up

(v) Halaman lupa password

(vi) Halaman admin

Semua halaman ini diunduh dari free css template yang berlisensi gratis dengan sebelmunya diolah dan disesuaikan dengan kebutuhan user. Oleh karena itu bentuk yang diberikan oleh pihak penyedia template mungkin sangat berbeda. Diharapkan dari prototype ini dapat memberikan gambaran bagaimana system bekerja nantinya.

4. Fase Implementasi Fase ini dibagi menjadi tiga tahap, yaitu : a. Coding Struktur kode dalam file

Seperti sudah dijelaskan sebelumnya, dengan menggunakan CI(codeigniter) arsitektur web sudah terbentuk yaitu MVC, dan dalam proyek ini struktur file direncanakan akan tampak seperti ini :

Dalam tahap coding, dilakukan penyusunan kode-kode untuk membuat tampilan dan fungsi secara utuh. Namun, yang akan diterangkan adalah sistemnya saja. Untuk menampilkan sebuah tampilan, user akan mengetikan alamat pada url, url ini akan merujuk kepada controller yang akan memanggil model dan view, sehingga menjadi kesatuan tampilan yang dapat berinteraksi dengan user akhirnya.

Controller

Adapun controller berisikan kode php murni untuk mengirimkan dan memanggil file lain pada folder model dan view. Salah satu contoh adalah sebagai berikut :

<?php class Arsip extends CI_Controller{ function __construct() { parent::__construct();

$this->load->model('mod_news'); $this->load->model('mod_komentar'); } function index() { if($this->session->userdata('login')==TRUE) { $data['username']=$this->session>userdata('username'); $data['pesan']=""; $config['base_url'] = site_url("index.php/arsip/index/"); $config['total_rows'] = $this->db->count_all('news'); $config['per_page'] = '5'; $config['next_link'] = 'Next Entries >>'; $config['prev_link'] = '<< Previous Entries'; $offset=$this->uri->segment(3); $data['news'] = $this->mod_news>selectAll($config['per_page'],$offset); $this->pagination->initialize($config); $this->load->view('guest/arsip', $data); }else { $data['pesan']=""; $config['base_url'] = base_url().'index.php/arsip/index/'; $config['total_rows'] = $this->db->count_all('news'); $config['per_page'] = '5'; $config['next_link'] = 'Next Entries >>'; $config['prev_link'] = '<< Previous Entries'; $offset=$this->uri->segment(3); $data['news'] = $this->mod_news>selectAll($config['per_page'],$offset); $this->pagination->initialize($config); $this->load->view('guest/arsip', $data); } } } ?> Controller di atas digunakan untuk menampilkan arsip, dimana arsip menggunakan pagination untuk memisahkan konten dalam satu halaman. Pada halaman ini setiap page maksimal terdiri dari 5 konten berita.

Untuk memanggil sebuah konten disebutkan tadi menggunakan url yang mengarahkan ke controller, untuk memanggil halaman secara tepat adapun aturannya sebagai berikut :

http://domain.xxx/class/function/id

class didefinisikan di awal pengetikan, hal ini dikarenakan codeigniter merupakan framework php yang berbasis php OOP(Object Oriented Programing/pemrograman berbasis objek). Selanjutnya ada function dimana setiap kelas dapat memiliki lebih dari satu fungsi. Bahkan bisa saja semua fungsi disatukan menjadi satu class. Namun, hal ini membuat riskan dalam sisi pengembangan. Hal ini dikarenakan pembagian fungsi dilakukan berdasarkan kebutuhan halaman sehingga semakin tertata maka akan semakin baik halaman tersebut. Sebagai contoh untuk memanggil halaman berita yang utuh dapat dilakukan seperti ini : http://chal-force.site90.com/index.php/arsip/pilih_berita/37

Di atas merupakan url yang dapat diartikan bahwa user memanggil class arsip dengan function pilih_berita dan ID 37. Id yang digunakan adalah id_judul dari database.

Model

Pada model dilakukan penarikan data dari table-table yang ada dalam database. Bentuk dari sebuah model adalah kode php yang terlihat seperti berikut : <?php class Mod_komentar extends CI_Model{ function selectKomen($id_judul) { $this->load->database(); $this->db->order_by("id_komen",'desc'); $this->db->where('id_judul',$id_judul); return $this->db->get('komentar')->result(); } } ?> Model di atas digunakan untuk memanggil database komentar yang dipanggil berdasarkan id_komen yang disusun secara descending dan id_judul sesuai

dengan judul pada saat ditampilkan. Pada controller model akan diload, agar fungsi di atas bisa dipanggil. View

View merupakan kode html yang disisipkan css, php serta javascript yang dibundel dalam file php. Sehingga dapat terbaca dan diproses oleh controller. Berikut contoh kode pada view : <html> <head> <?php $this->load->helper('HTML'); echo link_tag('assets/css/berita.css','stylesheet','text/css'); ?> <title>Arsip </title> </head> <body> <div id="menu"> <div id="main"> <!-- header begins --> <?php echo $this->load->view('guest/header');?> </div> <div id="content2"> <div id="page-bgtop"> <div id="page-bgbtm"> <div id="page"> <h1 align="center">Arsip</h1> <?php foreach ($news as $row): ?><br> <h2><a href=<?php echo base_url().'index.php/arsip/pilih_berita/'.$row>id_judul;?>><?php echo $row->judul?></a><br></h2> <?php echo $row->date?> | | by : <?php echo $row->penulis?><br><br> <div style="width:10px; float:left; height:15px;"></div> <?php $this->load->helper('text'); echo word_limiter($row->konten , 70);?> <br /> <?php echo anchor('arsip/pilih_berita/'.$row->id_judul,'baca selengkapnya');?> <br /> <?php if($this->session->userdata('login')==TRUE) { echo anchor('admin/update/'.$row->id_judul, ' Edit ') . '| | ' . anchor('admin/deletekonten/'.$row->id_judul, ' Hapus '); }?> <br>

<?php endforeach ?> <br /> <br /> <p echo $this->pagination->create_links();?></p> </div> </div> </div> <?php $this->load->view('guest/footer');?> Beberapa bagian diimport dari file php lain pada folder view lain seperti footer dan header. Namun sesungguhnya semua bagian ditampilkan lengkap pada saat dilihat oleh user. class=center><?php

b. Testing

Pada bagian ini dilakukan pengecekan apa setiap fungsi yang diharapkan berjalan dengan baik sesuai keinginan tim dan penyelenggara proyek. Sebagai contoh pihak penyelenggara dapat mencoba memasukkan konten dari halaman admin dengan memberikan hak akses berupa username dan password yang telah terdaftar kepada pihak penyelenggara. Seperti terlihat pada gambar di bawah ini :

Dari tampilan di atas proses testing berjalan dengan lancar sampai pada tampilan yang terlihat saat ini. Namun, jika masih ditemukan bug dan celah keamanan, maka dapat

ditandak lanjuti dengan langsung dilakukan perbaikan dan peningkatan keamanan. Setelah uji coba selesai dan web dianggap sudah layak untuk dipublikasikan maka web akan diletakan di hosting yang dapat diakses oleh penggunanya.

c. Instalasi Tahap instalasi dibagi menjadi 2 bagian yaitu hosting offline dan online Untuk offline tahap instalasi harus memenuhi syarat sebagai berikut :

1. Sudah memiliki server local(localhost), 2. Untuk penulis sudah terpasang codelobster 3. Browser yang dapat menjalankan javascript

Ketika kebutuhan-kebutuhan tersebut sudah terpenuhi, maka instalasi dapat dimulai dengan cara membuat project baru sehingga muncul tampilan seperti ini :

Setelah tampil seperti datas selanjutnya klik OK, sehingga tampil gambar berikut :

Klik finish untuk menyelesaikan proses pembuatan project sehingga tampil bundle code igniter standar.

Online Untuk yang satu ini dibutuhkan 2 bagian, yaitu :

1. Host server

Untuk menampung semua file yang berhubungan dengan media yang akan dibuat dan ditempatkan. Host server sendiri terbagi menjadi dua jenis, free dan berbayar. Kali ini digunakan yang free(gratis), yaitu berasal dari 000webhost.com.

2. Domain

Beberapa penyelenggara host juga menyediakan domain gratis yang dapat didaftarkan di halaman yang sama pada members areanya. Oleh karena itu tim berinisiatif untuk membuatkan account

sementara sampai pihak penyelenggara memberikan domain yang resmi.

Adapun tahapan-tahapan yang dapat dilakukan adalah sebagai berikut : i. Setelah media selesai di buat pada local server, lakukan zip media tersebut. Apabila memiliki filezilla tidak perlu. ii. Buka CPanel dan pilih file manager, untuk filezilla masukkan host server username dan password dengan bernar untuk menyambungkan directory pada server dengan directory pada computer. iii. Pilih upload data pada menunya atau copy seluruh data dari localhost ke server online didalam folder public_html iv. Lakukan konfigurasi di config/config dan config database Pada config/config rubah menjadi : $config['base_url'] = "http://chal-force.site90.net/"; Pada config/database rubah menjadi $db['default']['hostname'] = dapat dilihat di Cpanel; $db['default']['username'] = dapat dilihat di Cpanel; $db['default']['password'] = 'password yang dimasukkan pada saar daftar'; $db['default']['database'] = 'dapat dilihat dari studentsite;

v.

Import database Untuk mengimport database buatlah database sesuai

konfigurasi pada config/.database lalu import database yang sudah di export sebelumnya. Lakukan pada fasilitas

phpmyadmin yang disediakan host server. Ketika semua langkah tersebut dijalankan maka dijamin media ini sudah terupload dan dapat diakses secara online baik untuk guest atau listed user.

5. Fase Support

Seperti sudah disepakati bahwa tim tidak bertanggung jawab pada isi konten yang akan ditampilkan pada media web ini. Web ini akan diserahkan ke pengelola yang ditunjuk oleh pihak penyelenggara. Namun, tim juga melakukan layanan berupa training pengguna, pemeiliharan dan helpdesk. a. Pelatihan administrator(training) Selama minggu akhir semenjak prototype diluncurkan, pihak penyelenggara sudah harus menyiapkan seorang administrator. Administrator akan dilatih untuk dapat melakukan pemeliharaan dan helpdesk di wilayah administrator. b. Pemeliharaan Pemeliharaan dilakukan sebulan sekali di minggu pertama untuk mengecek arus data masih berjalan sesuai dengan rancangan sebelumnya atau tidak. Apabila ada usaha-usaha untuk melakukan kegiatan yang tidak dikehendaki yang diketahui tim, maka tim akan segera melaporkan ke pihak penyelenggara proyek. Jika ada kerusakan yang disebabkan oleh berbagai macam hal, akan dilakukan perbaikan. c. Helpdesk Tim bersedia untuk menerima keluhan dan membantu selama jam kerja berlangsung, Namun, helpdesk disini hanya diselenggarakan untuk administrator web. Jadi jika user mengalami masalah, user tidak langsung berhubungan dengan tim tetapi berhubungan dulu dengan administrator.