BAB 1 PENDAHULUAN1.1 Latar belakang Mengingat banyak penguna internet di Indonesia dari tahun ke tahun terus bertambah, maka perusahaan yang ingin dikenal secara luas perlu membuat situs/website yang berisi informasi yang ingin disampaikan kepada masyarakat. Baik itu mengenai produk, jasa ataupun mengenai informasi lainnya yang berhubungan dengan promosi sebuah perusahaan.Secara umum untuk membuat sebuah situs/website harus menguasai bahasa pemrogramaan web seperti ASP, PHP dan lain-lain. Tetapi berkat adanya perangkat lunak CMS atau Content Management System, membuat website dapat dengan mudah tanpa harus menguasai suatu bahasa pemrograman.1.2 PemasalahanBerdasarkan latar belakang masalah yang telah diuraikan, maka permasalahan yang dapat dirumuskan sebagai berikut. Yakni bagaimana membuat CMS sederhana untuk memenuhi ke dasar dari sebuah kebutuhan perusahaan namun mudah dikelola oleh orang awam yang tidak mempunyai latar belakang teknologi informasi.1.3 Ruang LingkupUntuk memberikan penekanan khusus agar tulisan mencapai sasaran maka dilakukan pembatasan laporan ini, sebagai berikut :1. Pembuatan website sebagai sarana informasi dan promosi perusahaan meliputi profil perusahaan, produk perusahaan, kontak dan informasi penting lainya.2. Sistem terfokus pada pengaturan konten, yakni pengolahan data meliputi penambahan, penghapusan, penghubahan dan penyajian.3. Desain Responsive yang dapat membantu dalam user interface atau tampilan berdasarkan screen pada perangkat gadget seperti mobile (handphone), iPad atau tablet dan dekstop.4. Pembuatan website mengunakan CMS sendiri dengan menggunakan bahasa pemrograman PHP, database yang digunakan MySQL dan untuk keperluan Desain Responsive yaitu mengunakan Bootstrap 3.1.1 serta modul tambahan jQuery validation 1.11.1 sebagai validasi form, CKEditor 4.3.4 Basic untuk penangan editor teks kemudian Font Awesome 4 sebagai icon untuk mempercantik tampilan.

BABIIDESAIN DAN IMPLEMENTASI

2.1 Desain dan ImplementasiDalam melakukan desain dan implementasi suatu program diperlukan suatu perangkat yang disebut komputer. Dimana komputer terdiri dari komponen perangkat keras (hardware) dan komponen perangkat lunak (software). Perangkat lunak yang digunakan dalam perancangan program ini adalah sebagai berikut :1. XAMPP2. Sublime TextXAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat 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[footnoteRef:2]. [2: http://id.wikipedia.org/wiki/XAMPP]

Sublime Text adalah teks editor berbasis Python yang cukup terkenal di kalangan pengembang, penulis, dan desainer. Sublime Text di kembangankan Jon Skinner, seorang programmer dari Australia.[footnoteRef:3] [3: http://www.makemac.com/sublime-text-3-beta/]

Sedangkan perangkat keras yang digunakan untuk membangun aplikasi ini adalah sebuah laptop dengan spesifikasi sebagai berikut :1. Prosesor: Intel(R) Core(TM) i3-2350M 2. RAM: 2.00 GB3. System type: 64-bit Operation System4. Harddisk: 500 GBPembahasan mengenai rancangan desain dari website ini akan dijelaskan dalam beberapa bentuk yaitu usecase diagram, activity diagram dan sequence diagram.1. Sequence DiagramSequence diagram atau diagram sekuensial adalah interaction diagram yang memperlihatkan event-event yang berurutan sepanjang berjalannya waktu. Masing-masing sequence diagram akan menggambarkan aliran-aliran pada suatu use case. Kita dapat membaca diagram ini dengan melihat pada objek-objek dan pesan-pesan (message). Gambar sequence diagram sebagai berikut :

Gambar 2.1 Sequence Diagram Proses Login

Gambar 2.2 Sequence diagram proses tambah produk

Gambar 2.3 Sequence diagram proses edit produk

Gambar 2.4 Sequence diagram proses hapus produk

Gambar 2.5 Sequence diagram proses edit halaman

Pada proses awal pembuatan aplikasi ini dibuatlah sebuah Use case diagram. Use case diagram adalah diagram yang menunjukkan fungsionalitas suatu sistem atau kelas dan bagaimana sistem tersebut berinteraksi dengan dunia luar dan menjelaskan sistem secara fungsional yang terlihat user. Use case diagram Website Makarya ini adalah sebagai berikut :

Gambar 2.6 Usecase Diagram1. Activity DiagramUntuk aliran kerja sistemnya, aplikasi ini menggunakan Activity Diagram. Activity Diagram merupakan teknik untuk mendeskripsikan logika prosedural, proses bisnis dan aliran kerja pada suatu sistem yang terdapat dalam use case. Gambar activity diagram sebagai berikut :

Gambar 2.7 Activity Diagram Tambah produk

Gambar 2.8 Activity Diagram Edit produk

Gambar 2.9 Activity Diagram Hapus produk

Gambar 3.0 Activity Diagram Edit Halaman2. Table Schema

+----------+-------------+------+-----+---------+----------------+| Field | Type | Null | Key | Default | Extra |+----------+-------------+------+-----+---------+----------------+| userID | int(1) | NO | PRI | NULL | auto_increment || username | varchar(25) | NO | | NULL | || password | varchar(50) | NO | | NULL | |+----------+-------------+------+-----+---------+----------------+Tabel Schema 2.1 Users

+--------------+-------------+------+-----+---------+----------------+| Field | Type | Null | Key | Default | Extra |+--------------+-------------+------+-----+---------+----------------+| productID | int(1) | NO | PRI | NULL | auto_increment || product_name | varchar(50) | NO | | NULL | || product_desc | text | NO | | NULL | || product_img | mediumblob | NO | | NULL | |+--------------+-------------+------+-----+---------+----------------+Tabel Schema 2.2 Product

+--------------+-------------+------+-----+---------+----------------+| Field | Type | Null | Key | Default | Extra |+--------------+-------------+------+-----+---------+----------------+| pageID | int(1) | NO | PRI | NULL | auto_increment || page_alias | varchar(50) | NO | | NULL | || page_title | varchar(50) | NO | | NULL | || page_content | text | NO | | NULL | |+--------------+-------------+------+-----+---------+----------------+Tabel Schema 2.3 Page

3. Tampilan Halaman Website

Gambar 4.1 Tampilan Halaman Utama

Gambar 4.2 Tampilan Halaman Produk

Gambar 4.3 Tampilan Halaman Manajemen produk

Gambar 4.4 Tampilan halaman edit produk

4. ImplementasiImplementasi merupakan tahap dimana desain atau perancangan sistem siap untuk dilaksanakan sesuai dengan analisa dan desain suatu program. Pada pembahasan implementasi kali ini yang akan dibahas adalah beberapa script program yang merupakan script program yang paling berpengaruh dari aplikasi. Diantaranya adalah : Authentifikasi user Script Tambah Produk Script Ubah Produk Script Hapus Produk Script Edit Halaman

Script Authentifikasi user