ANALIS DAN PERANCANGAN KOMPONEN JOOMLA! 3.1 Prinsip kerja Joomla!

Presentasi berjudul: "ANALIS DAN PERANCANGAN KOMPONEN JOOMLA! 3.1 Prinsip kerja Joomla!"— Transcript presentasi:

1 ANALIS DAN PERANCANGAN KOMPONEN JOOMLA! 3.1 Prinsip kerja Joomla!
BAB III ANALIS DAN PERANCANGAN KOMPONEN JOOMLA! 3.1 Prinsip kerja Joomla! Secara garis besar Website Joomla! terdiri dari 3 elemen dasar, yaitu server web (webserver), skrip PHP dan basisdata( dalam pembuatan tugas akhir ini menggunakan MySQL sesuai default Joomla!). Web server diasumsikan terhubung dengan Internet/Intranet yang berfungsi sebagai penyedia layanan situs. Skrip PHP terdiri dari kode program dalam bahasa PHP dan basisdata merupakan tempat penyimpanan konten. Joomla! menggunakan Apache sebagai server web dan MySQL untuk basisdatanya. Gambar Prinsip kerja Joomla! Pertamakali, pengguna meminta akses terhadap halaman Joomla! dengan mengeksekusi URL pada browser web yang kemudian terhubung dengan server web. Permintaan ini yang dalam istilah teknis lebih dikenal dengan query string selain terdapat URL juga mengandung parameter konten (section, category, ID article dan lain-lain). Berdasarkan parameter tersebut, sistem skrip Joomla! melakukan kontak dengan basisdata dan mengambil konten yang dimaksud berdasarkan parameternya. Terakhir, konten dan templat (template) digabung bersama dan kembali sebagai halaman html, gambar, css danjavascript. 3.1.1 Kebutuhan minimum sistem Seperti software lainnya Joomla! memiliki beberapa persyaratan yang harus dipenuhi agar dapat berfungsi dengan baik dan benar diantaranya : 26

2 Tabel 3.1.1 Requierement Joomla! versi 3.0 Software Recommended
27 Tabel Requierement Joomla! versi 3.0 Software Recommended Minimum PHP 5.3 + MySQL Web server yang didukung Apache (with mod_mysql, mod_xml, and mod_zlib) 2.x + Nginx 1.1 1.0 Microsoft IIS 7 Pada pembuatan penelitian ini penulis menggunakan aplikasi XAMPP, versi yang digunakan adalah ---- xampp-win VC9-installer yang berfungsi sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa pemrograman yang ditulis dengan bahasa pemrograman PHP dan Perl. Gambar Logo XAMPP Nama XAMPP merupakan singkatan dari X (dapat dijalankan pada sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya yaitu

3 28 3.1.2 Backend danfrontend Secara umum, website Joomla! terbagi menjadi 2(dua) yaitu Frontend (halaman depan) dan Backend (halaman belakang). Halaman Frontend Adalah halaman website Joomla! yang dapat diakses oleh siapapun pengguna Internet melalui alamat URL Karena bisa dilihat oleh siapapun, Halaman Front-end ini biasa dikenal juga dengan sebutan Public Site. Pada halaman ini ditampilkan artikel-artikel dan modul-modul extension yang dapat diakses sesuai dengan hak akses dari pengunjung situs yang telah disetting pada bagian backend oleh administrator, pengunjung dapat melakukan pendaftaran dan login kedalam situs Joomla! melalui modul login jika fasilitas register diaktifkan oleh administrator.. Agar Komponen-Komponen yang telah terinstall dapat diakses oleh pengunjung, administrator harus membuat tautan menu menuju Komponen-Komponen tersebut melalui bagian backend Joomla! Halaman Backend Adalah halaman yang dapat diakses oleh Administrator website Joomla! atau beberapa user lainnya yang diberi hak selevel administrator / SuperUSer / Supervisor, melalui alamat URL Karena hanya bisa diakses oleh beberapa orang tertentu untuk mengelola website Joomla!, halaman Backend ini biasa dikenal juga dengan Administrator Site. Pada halaman ini semua yang ditampilkan pada bagian frontend dapat diatur oleh administrator seperti penggantian theme, pengaturan serta instalasi / uninstalasi extension yang berguna untuk menambah fungsionalitas dari Joomla!, untuk masuk kehalaman administrator dibutuhkan username dan password sehingga keamanan situs Joomla! terjaga dari pengguna yang tidak berhak.

4 Gambar 3.1.3 Form login backend Joomla! 3.0
29 Gambar Form login backend Joomla! 3.0 3.1.3 Hak level akses User (pengguna) pada Joomla! umumnya terbagi menjadi beberapa tingkatan yang menentukan hak akses terhadap CMS Joomla! antara lain : Public Adalah pengunjung web yang hanya dapat melihat dan membaca artikel yang telah di publish pada Joomla!. Registered Seorang user yang terdaftar dapat masuk ke dalam system terbuka CMS Joomla! dan dapat melihat beberapa bagian tertentu, yang mana bagian tersebut tidak dapat diakses oleh pengunjung biasa atau public. Author Author memiliki wewenang untuk membuat article atau posting sebuah content pada sebuah bagian yang ia kehendaki, Author pun memiliki hak edit meskipun hanya sebatas untuk mengedit artikel yang ditulis oleh dirinya sendiri. Kesimpulan: Author memiliki hak akses yang sama dengan registered user. Bisa posting artikel dan edit artikel tersebut. Tidak memiliki hak edit Secara luas yaitu mengedit semua artikel yang ada kecuali artikel yang dibuatnya. Editor Memiliki Hak untuk menulis yang bebas seperti halnya Author namun juga editor memiliki hak akses yang bebas untuk melakukan perubahan-perubahan yang diperlukan pada setiap artikel yang ada di Frontend CMS Joomla! Publisher

5 Melakukan Installasi/Uninstall Exstensions dan Komponens
30 Merupakan tingkatan hak akses tertinggi pada bagian Frontend Joomla!. Publisher dapat melakukan semua hak User, Author dan Editor, sebagai tambahan fungsi, Publisher dapat menentukan mana saja Informasi atau artikel yang layak untuk dipublish atau ditampilkan pada Frontend Joomla! 6. Manager User Manager dapat membuat content/article dan juga dapat melihat informasi system yang digunakan pada backend Joomla!, Namun User Manager memiliki batasan untuk : Mengelola User Melakukan Installasi/Uninstall Exstensions dan Komponens Menaikan atau menurunkan status hak akses user Perubahan Global Configurasi Pengiriman Mass Mail kepada user Perubahan Template ataupun Bahasa yang digunakan 7. Administrator Administrator dapat melakukan semua fungsi-fungsi Manager. Selain itu administrator memiliki juga hak untuk melakukan penambahan Komponens dan extensions, Namun memiliki batasan untuk : Menaikan atau menurunkan status hak akses Super Administrator 8. Super Administrator Super Administrator dapat melakukan semua fungsi-fungsi Administrator dan memiliki Hak tidak terbatas akan pengelolaan CMS Joomla! 3.1.4 Bagian-bagian Joomla! Joomla! secara Global terdiri dari 5 bagian, yaitu: 1. Content Content merupakan isi dari website yang anda tempilkan, seperti profil, berita, artikel, dsb.

6 Merupakan extension yang digunakan untuk menampilkan informasi dari
31 Komponen ( ) Adalah aplikasi tambahan yang tertanam dalam Joomla! sehingga bisa mengelola database yang akan disimpan dan ditampilkan dalam website .contohnya seperti Galeri Foto, Halaman Contact, Guestbook, Forum, dll Module( ) Merupakan extension yang digunakan untuk menampilkan informasi dari database yang ditampilkan melalui - blok-blok template Plugin/mambot ( ) Dipakai untuk menangani event tertentu, misalnya untuk menyisipkan movie ke dalam artikel, menampilkan tooltips dan sebagainya. Plugin akan menyatu dengan Komponen atau modul dan biasa digunakan untuk memperkaya format tampilan Komponen atau module untuk spesifikasi fungsi tertentu Template (T) Mempunyai fungsi sebaga antarmuka yang menampilkan - data-data dalam database menjadi sebuah halaman website berupa layout tampilan yang menarik. Template dalam Joomla! ada dua jenis yaitu front end adalah untuk pengunjung dan back end untuk administrator. Language (L) biasanya digunakan untuk menerjemahkan bahasa yang dipakai dalam Joomla!. Jika ingin menggunakan Joomla! dalam bahasa tertentu, extension template bisa diinstal dan digunakan. 3.1.5 Struktur file dan direktori Joomla! memisahkan file - kode-kode program kedalam folder sesuai dengan fungsi dan kegunaannya sehingga memudahkan pengguna dalam mengelola instalasi Joomla!.

7 Gambar 3.1.4 Struktur file dan direktori
32 Gambar Struktur file dan direktori Berikut ini merupakan struktur - file-file Joomla!., file yang dibahas disini adalah file-file penting yang terletak di root direktori server. Index.php Merupakan file utama untuk menampilkan halaman web Joomla!.Beberapa pengaturan Joomla! terdapat pada file ini. Jika kita mengakses file ini,berarti kita membuka halaman depan website Joomla!. Misalnya : Configuration.php Merupakan file yang terbentuk saat kita melakukan proses instalasi Joomla!. Pada file ini terdapat pengaturan untuk koneksi ke database, dan pengaturan penting lainnya. Jika file ini rusak, website Joomla! tidak akan berfungsi dengan baik. Joomla! mempunyai beberapa direktori yang mempunyai fungsi tersendiri. Setiap direktori mempunyai subdirektori dan file-file pendukung sesuai fungsinya. Administrator Merupakan direktori khusus administrator untuk keperluan pengelolaan website Joomla!. Mulai dari proses installasi modul, Komponen, plugin, bahasa sampai dengan proses maintenance web secara keseluruhan. Cache Sebuah direktori khusus yang berfungsi untuk menyimpan data sementara di computer pengguna, tujuannya adalah mempercepat proses loading web jika dibuka pada waktu lain fungsinya sama dengan memori RAM komputer. Components

8 Merupakan direktori pendukung bagi aplikasi Joomla! yang lainnya.
33 Merupakan direktori tempat menyimpan seluruh Komponen yang terinstall di website Joomla!. Images Adalah direktori tempat menampung file-file gambar dan multimedia guna keperluan website Joomla!. Includes Merupakan direktori pendukung bagi aplikasi Joomla! yang lainnya. Installation Direktori yang digunakan dalam proses installasi website Joomla!. Jika proses installasi selesai, direktori ini sebaiknya dihapus, untuk keamanan web dimasa datang. Language Sebuah direktori khusus untuk menampung jenis-jenis bahasa yang dapat digunakan di website yang multi bahasa. Plugins Sebuah direktori untuk menampung tool tambahan dari Joomla!,Misalnya, mos images, mos pagebreak,dll. Media Sebuah direktori yang diperuntukkan untuk menyimpan dan meng-upload file-file ke dalam website Joomla!, baik file gambar maupun teks. Module Tempat menyimpan modul-modul yang terinstal di website Joomla!. Templates Tempat menyimpan semua template yang terinstal di website Joomla!. Template berperan dalam desain atau tata letak sebuah web berbasis Joomla!. 3.2 Penentuan alternatif Joomla! sudah memiliki puluhan bahkan ratusan add-on yang menambah maksimal fungsi dari CMS Joomla! itu sendiri. Mulai dari pengubahan tema untuk situs web, melakukan integrasi dengan situs jejaring sosial, pengaturan agenda, dll.

9 Gambar 3.2.1 Joomla! extensions directory
34 Gambar Joomla! extensions directory Dalam tugas akhir ini penulis membuat suatu extensions berupa Komponen Joomla! 3.0 dengan nama com_guru sebagai studi kasus yang dapat digunakan untuk pengelolaan biodata guru dalam situs web yang dibangun menggunakan Joomla!.Hal ini tentu akan mempermudah para administrator web sekolah untuk mengelola biodata guru dan mempermudah pihak sekolah untuk membuat dan menampilkan data guru. Untuk membuat Komponen Joomla! ,seorang pengembang (developer) bisa menggunakan beberapa cara untuk menghasilkan keluaran (output) yang diinginkan, diantaranya : Mengembangkan atau merekayasa dari Komponen yang sudah ada sehingga menjadi Komponen dengan isi seperti yang di inginkan. Membuat Komponen baru sesuai ketentuan yang digunakan pada Framework Joomla! dengan menggunakan salah satu Komponen lain sebagai contoh. 3.3 Evaluasi alternatif Setelah menentukan penentuan alternatif yang telah dijelaskan sebelumnya. Maka diperlukan adanya evaluasi alternatif untuk menentukan cara atau metode mana yang dianggap baik dan sesuai dengan kebutuhan sistem. Apabila menggunakan Komponen yang sudah ada,seorang pengembang harus mengetahui alur dan fungsi dari Komponen tersebut sehingga dapat melakukan perubahan perubahan untuk memenuhi kebutuhan field – field data yang diperlukan untuk menampilkan data seperti yang di inginkan,biasanya hal

10 3.4 Analisis terhadap usulan yang diberikan
35 ini lebih sulit dilakukan karena keterbatasan mengenai petunjuk yang mendetail dari Komponen yang sudah jadi tersebut. Dengan membuat Komponen baru pengembang aplikasi akan dapat mengatur data yang akan disimpan dan ditampilkan secara mendetail sesuai dengan kebutuhan. Pengembang aplikasi juga dapat lebih mudah untuk menambah fitur-fitur baru dari extensions yang dibuat karena sudah mengetahui aliran data dari Komponen tersebut. 3.4 Analisis terhadap usulan yang diberikan Hasil dari evaluasi yang dilakukan sebelumnya dan mengetahui titik permasalahan yang harus diselesaikan, maka langkah-langkah yang ditempuh untuk menyelesaikan masalah adalah dengan membaca, mempelajari dan menganalisa referensi-refensi yang ada, maka yang perlu dipelajari adalah : PHP framework Joomla!, yang merupakan inti bahasa pemograman yang dipakai oleh Joomla!. Dimana framework tersebut menggunakan konsep MVC (Model View Controller) untuk mengatur konsep pemograman PHP yang berorientasikan objek (OOP). Tata cara administrasi situs Joomla! 3.0 Struktur file dan direktori Komponen Joomla! 3.0 Integrasi Komponen Joomla!. 3.4.1 Analisis resiko Risiko adalah hal yang tidak akan pernah dapat dihindari pada suatu kegiatan atau aktivitas yang dilakukan oleh setiap orang, termasuk risiko dalam pengembangan Komponen ini. Penulis melakukan beberapa tahapan analisis terhadap risiko yang akan dihadapi. Langkah pertama untuk melakukan tahapan ini adalah pengumpulan data yang relevan terhadap risiko yang akan dianalisa. Setelah data yang dibutuhkan terkumpul, selanjutnya dilakukan proses evaluasi dampak dari sebuah risiko baik itu dari segi kegunaan maupun dari segi manfaat yang di dapatkan. Dari segi kegunaan dan pengembangan aplikasi ini tentunya diharapkan akan sangat berpengaruh secara signifikan terhadap aplikasi atau Komponen yang sudah ada sebelumnya. Karena Komponen ini bisa menarik minat peneliti

11 3.5.1 Prosedur pembuatan situs Joomla!
36 selanjutnya untuk menggunakan membuat atau mengembangkan Komponen Joomla!. Karena script untuk Komponen ini sendiri bersifat open source dimana semua orang bisa mengembangkan dengan leluasa untuk kemajuan teknologi informasi. 3.5 Perancangan Merupakan proses yang dilakukan oleh perancang sistem untuk mengerjakan spesifikasi sistem, membuat keputusan tentang bagaimana Komponen sistem diaktualisasikan. Proses ini menyangkut tujuan, fungsi dan informasi dari sistem tersebut. Perancangan yang baik harus mengetahui bagaimana mendapatkan efek yang dibutuhkan oleh spesifikasi tersebut dengan cara paling fleksibel, efesien dan elegan. Dalam hal ini, extension yang akan dibuat adalah Komponen com_guru yang inti bahasa pemogramannya mengunakan PHP yang memakai rangka kerja (framework) Joomla!. 3.5.1 Prosedur pembuatan situs Joomla! Prosedur yang yang dilakukan untuk pembuatan situs Joomla! dan instalasi Komponen com_guru adalah sebagai berikut: Administrator Situs Proses instalasi Joomla! Administrator situs melakukan instalasi Joomla! pada web server untuk didapatkan satu tampilan situs web yang sudah jadi. Pada penelitian ini penulis menggunakan Joomla! 3.0 pada localhost menggunakan aplikasi terpadu xampp.. Proses pengaturan awal Administrator situs dapat melakukan pengaturan awal untuk informasi yang akan ditampilkan melalui backend atau halaman administrasi Joomla!. Dalam pengaturan awal terdapat beberapa diantaranya:  Pengaturan template yang akan digunakan.  pembuatan informasi / artikel yang akan di tampilkan  Waktu tayang sebuah artikel

12 Proses instalasi Komponen com_guru
37 Proses instalasi Komponen com_guru Administrator harus menginstall Komponen com_guru melalui extensions manager pada Joomla! untuk dapat mengisi dan menampilkan data guru.. Proses pembuatan menu Administrator situs harus membuat tautan menu yang menuju ke Komponen com_guru sehingga dapat diakses oleh pengunjung web pada frontend. Pengunjung Proses melihat data guru Pengunjung situs dapat melihat data guru yang terdapat di dalam situs. Di dalam data ini memuat informasi berupa list nama-nama guru yang yang telah di isikan serta di publish datanya. Proses melihat detail guru Setelah pengunjung mendapat data yang di inginkan maka pengunjung dapat melihat detail data guru yang di harapkan melalui nomor induk pegawai (nip). Detail data guru ini memuat diantaranya nama guru,bidang studi yang di ajarkan berserta informasi pribadi guru. 3.5.2 Use case diagram Use case diagram merupakan pemodelan untuk kelakuan (behavior) sistem informasi yang akan dibuat. Use case mendeskripsikan sebuah interaksi antara satu atau lebih aktor dengan sistem yang akan dibuat. Secara kasar, use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam sebuah sistem informasi dan siapa saja yang berhak menggunakan fungsi-fungsi itu. Dalam pembuatan extensions ini, use case terdapat dua aktor dengan dua use case. Use Case Diagram extensions guru dapat dilihat di gambar

13 Gambar 3.5.1 Use case diagram Komponen guru
Deskripsi Usecase Setelah menentukan usecase yang ada pada sistem, maka penjelasan masing-masing use case yang terdapat di Use Case Diagram dapat dilihat di tabel dan 3.5.2 Tabel Use case description mengatur konfig Use Case : Melakukan konfigurasi ID : 001 Aktor : Pemilik Situs Deskripsi : Administrator situs melakukan login ke dalam sistem melalui back-end atau halaman administrasi Joomla!. Administrator situs melakukan instalasi Komponen com_guru melalui extensions manager Joomla!. Administrator mengklik tautan menu pengaturan Komponen com_guru Sistem menampilkan halaman list data guru. Administrator situs memasukkan beberapa data yang berkaitan dengan dengan Biodata guru. Administrator situs menyimpan data yang telah di isikan. Administrator situs membuat tautan menu com_ guru yang akan ditampilkan padafrontend.

14 Tabel 3.5.2 Tabel Use Case Description Melihat Data Guru
39 8. Sistem menampilkan tautan menu yang menuju com_guru pada front end Joomla!. Tabel Tabel Use Case Description Melihat Data Guru Use Case Aktor Melihat Data Guru ID : 002 Pengunjung Situs Deskripsi : Pengunjung situs mengklik menu Biodata guru Sistem menampilkan list guru yang telah di publish Pengunjung situs mengklik tautan detail pada list guru untuk melihat detail data guru yang dipilih Sistem menampilkan detail data guru 3.5.3 Sequence diagram Sequence Diagram menggambarkan kelakuan objek pada use case dengan mendeskripsikan waktu hidup objek dan pesan yang dikirimkan dan diterima antar objek. Oleh karena itu untuk menggambar diagram sekuen maka harus diketahui objek-objek yang terlibat dalam sebuah use case beserta metode-metode yang dimiliki kelas yang diinstansiasi menjadi objek itu. Pada gambar digambarkan bagaimana sequence pemilik situs dalam melakukan konfigurasi awal setelah melakukan instalasi Komponen guru. http ://w Pada gambar digambarkan bagaimana sequence pemilik situs dalam melihat ww .me data guru dan men ghap us data guru yang ada. rcu bua na. ac.i d

15 Gambar 3.5.2 Sequence diagram administrator Joomla!

16 Gambar 3.5.3 Sequence administrator melihat dan menghapus data guru
4 0 Gambar Sequence administrator melihat dan menghapus data guru Pada gambar digambarkan bagaimana sequence pengunjung dalam melihat data guru yang ada. Gambar Sequence Diagram Pengunjung Situs Melihat data guru Activity diagram Activity diagram menggambarkan workflow (aliran kerja) atau aktifitas dari sebuah sistem atau proses bisnis. Yang perlu diperhatikan disini adalah activity diagram sistem ,bukan apa yang dilakukan aktor, jadi aktifitas yang dapat dilakukan oleh sistem. Pada gambar dijelaskan aliran kerja administrator Joomla! dari proses melakukan instalasi sampai pengaturan biodata gutu yang akan ditampilkan

17 Gambar 3.5.5 Activity diagram administrator Joomla!
41 [Sudah] Gambar Activity diagram administrator Joomla! Pada gambar dijelaskan aliran kerja pengunjung situs. Dimana pengunjung situs dapat melihat daftar guru dan detail guru yang terdapat didalam basis data. Gambar Activity Diagram Pengunjung Situs Basis data yang digunakan Untuk perancangan basis data, penulis menggunakan 1 tabel yaitu ‘#_guru_biodata’, tabel ini berguna untuk menyimpan biodata guru yang telah di

18 4 2 isi ke dalam basis data situs Joomla!. Tabel pada Joomla! memiliki prefix #_ dimana #_ harus mengikuti prefix database Joomla!, Penjelasan dari masing-masing tabel di class diagram tersebut, bisa dilihat diuraian dibawah ini: Id merupakan field dengan tpe data int(11) yang merupakan primary key dari tabel Ordering merupakan field dengan type data INT(11) yang berguna untuk menyimpan urutan data pada Joomla!. State merupakan field dengan type data TINYINT(1) yang berguna untuk menyimpan status publikasi data. checked_out merupakan field dengan type data INT(11) yang berguna untuk mencegah pengeditan data oleh 2(dua) orang pada saat yang bersamaan. `checked_out_time` merupakan field dengan type data DATETIME yang berguna untuk mencatat waktu pengeditan data. `created_by` merupakan field dengan type data INT(11) yang berguna untuk mencatat ID user yang membuat data. `nip` merupakan field dengan type data VARCHAR(10) yang berguna untuk mencatat nomor induk pegawai. `nama` merupakan field dengan type data VARCHAR(100) yang berguna untuk mencatat nama guru. `jkelamin` merupakan field dengan type data VARCHAR(255) yang berguna untuk mencatat jenis kelamin guru. `nuptk` merupakan field dengan type data VARCHAR(10) yang berguna untuk mencatat nomor nuptk guru. `pdk_akhir` merupakan field dengan type data VARCHAR(255) yang berguna untuk mencatat pendidikan terakhir guru., `thn_masuk` adalah field dengan type data YEAR yang berguna untuk mencatat tahun mulai mengajar guru. `status_guru` merupakan field dengan type data VARCHAR(255) yang berguna untuk mencatat status guru. `jabatan` merupakan field dengan type data VARCHAR(255) yang berguna untuk mencatat jabatan guru.

19 Tabel 3.5.3 tabel '#_guru_biodata'
43 `pelajaran` merupakan field dengan type data VARCHAR(255) yang berguna untuk mencatat mata pelajaran yang di ampu guru. `tmp_lhr` merupakan field dengan type data VARCHAR(50) yang berguna untuk mencatat tempat kelahiran guru. `tgl_lhr` merupakan field dengan type data DATE yang berguna untuk mencatat tanggal lahir guru. `agama` merupakan field dengan type data VARCHAR(255) yang berguna untuk mencatat agama yang dianut guru. `alamat` merupakan field dengan type data VARCHAR(255) yang berguna untuk menyimpan alamat guru. `notelp` merupakan field dengan type data VARCHAR(18) yang berguna untuk menyimpan nomor telepon guru. `foto` merupakan field dengan type data VARCHAR(255) yang berguna untuk menyimpan lokasi foto guru. `info` merupakan field dengan type data TEXT yang berguna untuk meyimpan informasi tambahan guru. `link_user` merupakan field dengan type data INT(11) yang berguna untuk meyimpan kaitan data dengan user Joomla!. Tabel tabel '#_guru_biodata' Nama Kolom Type Panjang Keterangan `id` Int 11 Primary Key `ordering` `state` Tinyint 1 `checked_out` `checked_out_time` datetime DEFAULT ' :00:00', `created_by` `nip` Varchar 10 `nama` 100 `jkelamin` 255 `nuptk` `pdk_akhir` `thn_masuk` YEAR `status_guru` `jabatan` `pelajaran` `tmp_lhr` 50 `tgl_lhr` Date DEFAULT ' ',

20 3.5.6 Perancangan antarmuka
4 4 `agama` Varchar 255 `alamat`, `notelp` 18 `foto` `info` Text `link_user` IInt 11 3.5.6 Perancangan antarmuka Pada bagian ini akan dijelaskan, mengenai tampilan pengguna dari Komponen guru untuk menyimpan ,mengedit serta melihat data guru. Perancangan antarmuka ini terdiri dari 4 halaman, yaitu halaman list guru pada backend,form pengisian data guru pada backend, halaman list guru padafrontend, dan halaman detail guru padafrontend. Rancangan antarmuka list guru pada backend Rancangan ini adalah untuk halaman utama Komponen guru yang terbuka. Halaman ini berisi list guru yang telah di isikan kedalam basis data. Daftar ini berisi mengenai deskripsi singkat dari data guru yang , meliputi nip, nama guru ,tahun mulai mengajar serta mata pelajaran yang diajarkan. Rancangan antarmuka halaman lsit guru dapat dilihat pada gambar 3.5.7 Gambar Rancangan backend list guru Rancangan form pengisian biodata guru pada backend Halaman ini bertujuan untuk mengisi informasi biodata guru sehingga dapat disimpan kedalam basis data serta sebagai halaman detail guru yang dapat digunakan untuk memutakhirkan data guru yang telah di simpan. Rancangan antarmuka halaman pengisian data dapat dilihat pada gambar 3.5.8

21 Gambar 3.5.8 Rancangan form isian biodata guru
45 Gambar Rancangan form isian biodata guru Rancangan antarmuka pengunjung list guru Rancangan antarmuka ini adalah untuk halaman daftar guru yang dapat dilihat oleh pengunjung setelah menekan tautan menu. Halaman ini berisi list guru yang telah di isikan datanya kedalam basis data serta di publish oleh administrator situs . Daftar ini berisi mengenai foto,nip,nama guru dan mata pelajaran yang diampu yang berfungsi juga sebagai link yang akan mengarahkan pengunjung menuju detail guru tersebut. Jika Administrator atau seorang yang memiliki hak akses setara melakukan Login melalui frontend, pada halaman list guru akan tampil - tombol-tombol seperti pengisian data baru, publish/unpublish data dan tombol hapus data. Pengaturan hak akses untuk melakukan pengeditanm data, publish serta delete dapat dilakukan pada bagian backend Joomla!. Rancangan antarmuka halaman list guru dapat dilihat pada gambar 3.5.9

22 Gambar 3.5.10 Rancanganfrontend detail biodata guru
4 6 Gambar Rancangan list guru padafrontend Rancangan antarmuka detail guru padafrontend Rancangan ini adalah untuk halaman detail data guru. Tampilan halaman ini berisi data guru yang lebih lengkap. Untuk pengunjung dengan hak akses setara administrator, pada halaman detail biodata guru akan ditampilkan 3(tiga) tombol yang berada di bawah halaman. Tombol ini berfungsi antara lain untuk pemutakhiran data(edit) dan penghapusan data (delete). Rancangan antarmuka halaman detail dilihat pada gambar Gambar Rancanganfrontend detail biodata guru