BAB I PENDAHULUAN 1.1 LATAR BELAKANG MASALAH Seiring dengan pesatnya perkembangan zaman, banyak bermunculan hardware-hardware baru untuk PC beserta software terbaru. Dan dimasa sekarang telah tumbuh pesat gadget-gadget dengan teknologi terbaru. Dimasa sekarang, banyak orang yang mencari gadget terbaru, tetapi hanya mengetahui merek dari gadget tersebut, tidak mengetahui keseluruhan dari seluk beluk gadget tersebut, mulai dari spesifikasi, kelebihan maupun kekurangannya. Hal di atas berlaku juga untuk hardware dan software PC. Penulis membuat suatu aplikasi berbasis web yang hampir sama layaknya sebuah CMS yang di bangun dengan bahasa PHP untuk mereview gadget, hardware dan software terbaru yang bertujuan dapat memberikan manfaat bagi pembaca agar dapat mengetahui terlebih dahulu spesifikasi, kelebihan dan kekurangan item tersebut. 1.2 IDENTIFIKASI MASALAH Berdasarkan latar belakang masalah tersebut, Penulis mengidentifikasi bahwa perlunya suatu aplikasi berbasi web yang dapat menyajikan review tersebut dan dapat di update dengan mudah melalui halaman admin (backend), lalu article yang di submit di halaman admin secara otomatis tampil ke halaman depan web (frontend) sesuai dengan category nya. 1.3 TUJUAN DAN MANFAAT PENILITIAN Penulis bertujuan membuat apliakasi berbasis web CMS Top In Tech ini untuk mereview gadget, hardware dan software terbaru agar pembaca dapat mengetahui terlebih dahulu spesifikasi, kelebihan dan kekurangan dari item tersebut. 1 2 1.4 BATASAN MASALAH Web CMS Top In Tech ini merupakan aplikasi berbasis PHP & MYSQL, dimana web ini menggunakan Database untuk penyimpanan datanya, seperti user untuk masuk ke halaman admin, post untuk content dalam sebuah article, serta category untuk mementukan post termasuk dalam category mana. Web ini dibuat berdasarkan review sebuah gadget, hardware maupun software. Web ini mengambil prinsip dari CMS sendiri, yaitu mengelola dan memfasilitasi proses pembuatan, pembaharuan, dan publikasi content secara bersama. Tools yang digunakan untuk pembuatan web ini adalah Adobe Dreamweaver CS5. 1.5 METODOLOGI PENELITIAN Dalam menyelesaikan proyek ini, penulis menggunakan sistem pengumpulan data sebagai berikut : a. Studi pustaka studi pustaka dimaksudkan untuk mendapatkan landasan teori, data atau informasi sebagai bahan acuan dalam melakukan perencanaan, percobaan, pembuatan dan penyusunan tugas akhir b.Perencanaan dan Implementasi perencanaan ini dimaksudkan untuk memperoleh design suatu web CMS yang baik c. Pembuatan Web merupakan inti pekerjaan dimana disini dilakukan penulisan source code menggunakan tools Adobe Dreamweaver CS5 agar web yang dibuat bisa berjalan seperti yang dikehendaki. 1.6 SISTEMATIKA PENULISAN Sistematika penulisannya terdiri dari 5 bab dan lampiran sebagai tambahannya. Diantaranya adalah : Bab I yaitu Pendahuluan terdiri dari Latar Belakang, Identifikasi Masalah, Tujuan dan Manfaat Penelitian, Pembatasan Masalah, Metodologi Penelitian, sistematika Penulisan. 3 Bab II, yaitu Landasan Teori yang digunakan dalam pembuatan web dan penjelasannya. Bab III, yaitu Analisa dan Perancangan sistem terdiri dari Analisa Sistem, Analisa Data, Perancangan Sistem Bab IV, yaitu Implementasi Sistem yang menjabarkan secara mendetail kode program beserta tampilannya. Bab V, yaitu Penutup terdiri dari Kesimpulan dan Saran. BAB II LANDASAN TEORI 2.1 Flowchart Flowchart merupakan simbol yang mewakili setiap proses dalam program. Berikut simbol yang digunakan untuk membuat flowchart : Table 2.1 Simbol dan fungsi pada flowchart SIMBOL NAMA FUNGSI TERMINATOR Permulaan / akhir program GARIS ALIR Arah aliran program (FLOW LINE ) Proses Inisialisasi / pemberian harga PREPARATION awal Proses perhitungan / proses PROSES pengolahan data INPUT / OUTPUT Proses input / output data, DATA parameter, informasi PREDIFINED Permulaan sub program / proses PROGRAM menjalankan sub program Perbandingan pernyataan, DECISION penyeleksian data yang memberikan pilihan untuk langkah selanjutnya Penghubung bagian-bagian ON PAGE flowchart yang berada pada satu CONNECTOR halaman Penghubung bagian-bagian OFF PAGE flowchart yang berada pada bagian CONNECTOR berbeda 4 5 DISPLAY Simbol yang menandakan Display, atau tampilan program 2.2 Teori Dasar mengenai Web Website ( situs web ) adalah merupakan alamat ( URL ) yang berfungsi sebagai tempat penyimpanan data dan informasi dengan berdasarkan topik tertentu. Web Page ( halaman web ) merupakan halaman khusus dari situs web tertentu yang tersimpan dalam bentuk file. Dalam web page tersimpan berbagai informasi dan link yang menghubungkan suatu informasi ke informasi lain baik itu dalam page yang sama ataupun web page lain pada website yang berbeda. 2.3 Teori Dasar mengenai Web Database Web database merupakan sistem penyimpanan data yang dapat diakses oleh bahasa pemrograman tertentu. Web database dapat diakses oleh aplikasi-aplikasi web yang dikembangkan dengan HTML tag, kontrol active X dan pemrograman yang bersifat server side melalui CGI, PHP, Microsoft IIS (Internet Information Server). Web atau disebut sebagai World Wide Web ( WWW ) adalah fasilitas yang menyediakan interface yang saling keterkaitan dan berinteraksi antar jaringan yang sederhana ke sumber daya internet yang sangat besar. World Wide Web ( WWW ) bukan sekedar jaringan tetapi didalamnya terdapat suatu sel aplikasi komunikasi dan sistem perangkat lunak yang memiliki karakteristik tertentu diantaranya yaitu : a. Umumnya tertetak pada internet host dan client b. Umumnya menggunakan protocol TCP/IP c. Mengerti HTML d. Mengikuti model client/server untuk komunikasi data dua arah e. Memungkinkan client untuk mengakses server dengan protocol seperti HTTP, FTP, Telne, dan Gopher 6 f. Memungkinkan client untuk mengakses informasi dalam berbagai media seperti teks, audio, video g. Menggunakan model alamat Unifor Resource Locators ( URL ) 2.4 Teori Dasar mengenai CMS CMS (Content Management System) adalah suatu sistem yang digunakan untuk mengelola dan memfasilitasi proses pembuatan, pembaharuan, dan publikasi content secara bersama (collaborative content management). Content mengacu pada informasi dalam bentuk teks, grafik, gambar maupun dalam format-format lain yang perlu dikelola dengan tujuan memudahkan proses pembuatan, pembaharuan, distribusi, pencarian, analisis, dan meningkatkan fleksibilitas untuk ditransformasikan ke dalam bentuk lain. Terminologi CMS sendiri cukup luas, di antaranya mencakup software aplikasi, database, arsip, workflow, dan alat bantu lainnya yang dapat dikelola sebagai bagian dari mekanisme jaringan informasi suatu perusahaan maupun global. 2.5 Teori Dasar mengenai HTML (Hyper Text Markup Language) Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standart pemformatan dokumen text yaitu Standart Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen atau text biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. Perintah-perintah HTML diletakkan dalam file berekstensi *.html dan ditandai dengan mempergunakan tag ( tanda ) berupa karakter “ < “ dan “ > “. Tidak seperti bahasa pemrograman berstruktur seperti pascal atau C, HTML tidak mengenal jumping atau looping. Kode-kode HTML dibaca oleh browser dari atas kebawah tanpa adanya lompatan-lompatan. 7 2.6 Teori Dasar mengenai PHP PHP adalah singkatan dari "PHP: Hypertext Prepocessor", yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML. PHP merupakan bahasa pemograman scripting yang bersifat open source. PHP adalah salah satu bahasa Server-side yang didesain khusus untuk aplikasi web. PHP dapat disisipkan diantara bahasa HTML dan karena bahasa Server side, maka bahasa PHP akan dieksekusi di server, sehingga yang dikirimkan ke browser adalah “hasil jadi” dalam bentuk HTML, dan kode PHP anda tidak akan terlihat. Keunggulan PHP adalah: a. PHP memiliki tingkat akses yang lebih cepat b. PHP memiliki tingkat lifecycle yang cepat sehingga selalu mengikuti perkembangan teknologi internet c. PHP mampu berjalan di beberapa server web, seperti Apache, Microsoft IIS, PWS, phttpd, fhttpd, AOLServer dan Xitami d. PHP mampu berjalan di Linux sebagai platform Sistem Operasi yang utama, juga dapat berjalan di FreeBSD, Unix, Solaris, dan Windows e. PHP mendukung akses ke beberapa database baik yang bersifat gratis atau komersial, seperti mSQL, MySQL, Informix, dan MicrosoftSQL Server f. PHP bersifat Open Source 2.7 Teori Dasar mengenai MySQL MySQL (My Structure Query Language) adalah sebuah program pembuat database yang bersifat open source dan berjalan di semua platform baik Windows maupun Linux. Selain itu, MySQL juga merupakan program pengakses database yang bersifat jaringan sehingga dapat digunakan untuk aplikasi Multi User (Banyak Pengguna). Sebagai sebuah program penghasil database, MySQL tidak dapat berjalan sendiri tanpa adanya sebuah aplikasi lain (interface). Oleh karena itu harus ada software 8 pendukung antara lain PHP (Paper Hipertext Preposesor), Visual Delphi, Visual Basic, Cold Fusion, dan lain-lain. MySQL memiliki layer utama seperti layer DOS yaitu memiliki prompt utama yang disebut mysql, tetapi sekarang ada suatu program dump yang dibuat seperti web berjalan di bawah server database yang disebut PhpMyAdmin. Untuk memprogram database lewat prompt harus paham dan hafal mengenai perintah query tetapi dengan PhpMyAdmin pengaksesan akan terasa singkat dan lebih mudah karena sudah ada grafik interface yang memudahkan dalam pembuatan database serta pengaksesan perintah-perintah Query. MySQL memiliki beberapa keistimewaan dan keunggulan, antara lain : 1. Portabilitas. MySQL dapat berjalan stabil pada berbagai sistem operasi seperti Windows, Linux, FreeBSD, Mac Os X Server, Solaris, Amiga, dan masih banyak lagi. 2. Perangkat lunak sumber terbuka. MySQL didistribusikan sebagai perangkat lunak sumber terbuka, dibawah lisensi GPL sehingga dapat digunakan secara gratis. 3. Multi-user. MySQL dapat digunakan oleh beberapa pengguna dalam waktu yang bersamaan tanpa mengalami masalah atau konflik. 4. ‘Performance tuning’, MySQL memiliki kecepatan yang menakjubkan dalam menangani query sederhana, dengan kata lain dapat memproses lebih banyak SQL per satuan waktu. 5. Ragam tipe data. MySQL memiliki ragam tipe data yang sangat kaya, seperti signed / unsigned integer, float, double, char, text, date, timestamp, dan lain-lain. 6. Perintah dan Fungsi. MySQL memiliki operator dan fungsi secara penuh yang mendukung perintah Select dan Where dalam perintah (query). 7. Keamanan. MySQL memiliki beberapa lapisan keamanan seperti level subnetmask, nama host, dan izin akses user dengan sistem perizinan yang mendetail serta sandi terenkripsi. 9 8. Skalabilitas dan Pembatasan. MySQL mampu menangani basis data dalam skala besar, dengan jumlah rekaman (records) lebih dari 50 juta dan 60 ribu tabel serta 5 milyar baris. Selain itu batas indeks yang dapat ditampung mencapai 32 indeks pada tiap tabelnya. 9. Konektivitas. MySQL dapat melakukan koneksi dengan klien menggunakan protokol TCP/IP, Unix soket (UNIX), atau Named Pipes (NT). 10. Lokalisasi. MySQL dapat mendeteksi pesan kesalahan pada klien dengan menggunakan lebih dari dua puluh bahasa. Meski pun demikian, bahasa Indonesia belum termasuk di dalamnya. 11. Antar Muka. MySQL memiliki antar muka (interface) terhadap berbagai aplikasi dan bahasa pemrograman dengan menggunakan fungsi API (Application Programming Interface). 12. Klien dan Peralatan. MySQL dilengkapi dengan berbagai peralatan (tool)yang dapat digunakan untuk administrasi basis data, dan pada setiap peralatan yang ada disertakan petunjuk online. 13. Struktur tabel. MySQL memiliki struktur tabel yang lebih fleksibel dalam menangani ALTER TABLE, dibandingkan basis data lainnya semacam PostgreSQL ataupun Oracle. 2.8 Teori Dasar mengenai Adobe Dreamweaver Adobe Dreamweaver merupakan HTML editor professional yang berfungsi mendesain, melakukan editing dan mengembangkan aneka website. Salah satu kelebihan Adobe Dreamweaver yaitu ruang kerja Adobe Dreamweaver beserta tools yang tersedia dapat digunakan dengan sangat mudah dan cepat sehingga anda bisa membangun suatu website dengan cepat dan tanpa harus melakukan coding. 2.9 Teori Dasar mengenai XAMPP XAMPP merupakan singkatan dari X (empat system operasi apapun), Apache, MySQL, PHP, Perl. XAMPP merupakan tool yang menyediakan paket perangkat lunak ke dalam satu buah paket. 10 Dalam paketnya sudah terdapat Apache (web server), MySQL (database), PHP (server side scripting), Perl, FTP server, phpMyAdmin dan berbagai pustaka bantu lainnya. Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi web server Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan mengkonfigurasikannya secara otomatis untuk Anda. 2.9.1 Teori Dasar mengenai Apache Apache sudah berkembang sejak versi pertamanya. Apache bersifat open source, artinya setiap orang boleh menggunakannya, mengambil dan bahkan mengubah kode programnya. Tugas utama apache adalah menghasilkan halaman web yang benar kepada peminta, berdasarkan kode PHP yang dituliskan oleh pembuat halaman web. Jika diperlukan juga berdasarkan kode PHP yang dituliskan, maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan. 2.9.2 Teori Dasar mengenai PhpMyAdmin PhpMyAdmin, Pengelolaan database dengan MYSQL harus dilakukan dengan mengetikkan baris-baris perintah yang sesuai (command line) untuk setiap maksud tertentu. Jika anda ingin membuat database, ketikkan baris perintah yang sesuai untuk membuat database. Jika kita ingin menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola data base dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin kita dapat membuat tabel, mengisi data dan lain-lain dengan mudah tanpa harus hafal perintahnya. Untuk mengaktifkan phpMyAdmin langkah-langkahnya adalah : yang pertama setelah XAMPP kita terinstall, kita harus mengaktifkan web server Apache dan MySQL dari control panel XAMPP. Yang kedua, jalankan browser (IE, Mozilla Firefox atau Opera) lalu ketikkan alamat web berikut: http://localhost/phpmyadmin/ pada address bar lalu tekan Enter. Langkah ketiga apabila telah nampak interface (tampilan antar muka) phpMyAdmin anda bisa memulainya dengan mengetikkan nama database, nama tabel dan seterusnya. BAB III ANALISA DAN PERANCANGAN SISTEM 3.1 Analisa System 3.1.1 Flowchart FrontEnd Secara umum halaman FrontEnd dari web ini adalah home, halaman sotware, halaman hardware dan halaman gadget. START T VIEW HALAMAN HOME HOME F T VIEW HALAMAN SOFTWARE SOFTWARE F T VIEW HALAMAN HARDWARE HARDWARE F T VIEW HALAMAN GADGET GADGET F End Gambar 3.1 Flowchart FrontEnd 11 12 3.1.2 Flowchart BackEnd Pada halaman BackEnd, user harus memasukkan username dan password sesuai dengan data yang ada didalam table user, dengan username = table users.username dan password = table users.password, jika username atau password salah, maka akan muncul notifikasi bahwa username atau password salah dan memungkinkan untuk mengulang kembali untuk memasukkan username dan password yang benar. Jika user belum login, maka halaman yang ada selain halaman login tidak bisa diakses (di redirect ke halaman login). Jika user telah login, maka user dapat mengakses halaman-halaman yang terdapat dalam page BackEnd tersebut. Jika user logout, maka akan di redirect ke halaman login dan aturan yang sama berlaku seperti user belum login. 13 START Username atau password Salah Input Username dan Password Username = users.username && Password = users.password F T T EDIT & DELETE NEWS DASHBOARD F T ADDNEWS ADD NEWS F T EDIT & DELETE ADMIN ADMIN F T ADD ADMIN ADD ADMIN F T LOGOUT F END Gambar 3.2 Flowchart BackEnd 14 3.2 Perancangan System 3.2.1 Perancangan System Basis Data Pada Web CMS Top In Tech ini, terdapat beberapa table yang digunakan di dalam Database, yaitu : Table Category : Column Type Keterangan ID int (10) ID Category Category varchar (100) Nama Category Column Type Keterangan ID bigint (20) ID Post Title text Judul Post Category varchar (500) Kategori Post Content text Content / Isi Post Updated timestamp Table Post : Tanggal & Waktu untuk Post Table Users : Column Type Keterangan ID int (10) ID User Name varchar (64) Nama User Username varchar (64) Username User Password varchar (64) Password User Updated timestamp Tanggal & Waktu untuk User 15 3.2.2 Halaman FrontEnd Halaman FrontEnd merupakan halaman di mana di tampilkan content hasil dari add news atau article di halaman BackEnd, di halaman FrontEnd ini terdapat halaman home, yaitu halaman yang menampilkan seluruh news atau article yang di submit di halaman BackEnd dan di sort berdasarkan tanggal update. Halaman software, yaitu halaman yang menampilkan seluruh news atau article dengan category software dan di sort berdasarkan tanggal update. Halaman hardware, yaitu halaman yang menampilkan seluruh news atau article dengan category hardware dan di sort berdasarkan tanggal update. Halaman gadget, yaitu halaman yang menampilkan seluruh news atau article dengan category gadget dan di sort berdasarkan tanggal update. 16 Header Logo HOME SOFTWARE HARDWARE GADGET Banner Content Footer Gambar 3.3 Rancangan Design Halaman FrontEnd 3.2.3 Halaman BackEnd Halaman BackEnd merupakan halaman di mana user dapat memanagement news atau article (add, edit, delete) serta memanagement admin (add, edit, delete). Sebelum user dapat mengakses halaman-halaman yang ada, 17 user di haruskan untuk login sesuai dengan data yang ada pada database, jika user gagal untuk login (username atau password salah), maka user akan mendapatkan notifikasi bahwa username atau password yang dimasukkan salah (tidak terdapat di dalam database), dan user dapat memasukkan lagi username dan password pada halaman login. Pada halaman dashboard, user dapat melihat keseluruhan news atau article yang ada serta dapat meng-edit atau men-delete news atau article tersebut. Pada halaman add news, user dapat menambahkan news atau article baru. Pada halaman admin, user dapat melihat keseluruhan user yang ada serta dapat mengedit dan men-delete user yang ada. Pada halaman add admin, user dapat menambahkan user baru. Jika user memilih homepage, maka user akan di redirect ke halaman FrontEnd. Dan jika user memilih logout, maka user akan di redirect ke halaman login, dan harus memasukkan kembali username dan password agar bisa mengakses kembali halaman-halaman yang terdapat dalam halaman BackEnd ini. 18 Header Logo DASHBOARD ADD NEWS ADMIN ADD ADMIN HOMEPAGE Content Footer Gambar 3.4 Rancangan Design Halaman BackEnd LOGOUT BAB IV IMPLEMENTASI SYSTEM 4.1 Aplikasi Web secara Umum Web ini terdiri dari 2 bagian utama, yaitu halaman BackEnd dan halaman FrontEnd. 4.2 Database Penulis menggunakan database Project, dan membuat 3 table baru yaitu table users, post, dan category. Table user : CREATE TABLE IF NOT EXISTS `users` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `name` varchar(64) NOT NULL, `username` varchar(64) NOT NULL, `password` varchar(64) NOT NULL, `updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; Table post : CREATE TABLE IF NOT EXISTS `post` ( `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `title` text NOT NULL, `category` varchar(500) NOT NULL, `content` text NOT NULL, `updated` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; Table category : CREATE TABLE IF NOT EXISTS `category` ( `ID` int(10) NOT NULL AUTO_INCREMENT, `category` varchar(100) NOT NULL, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; 19 20 Setelah itu buat suatu file *.php untuk membuat koneksi ke server database, disini penulis membuat file dengan nama conndb.php <?php # FileName="Connection_php_mysql.htm" # Type="MYSQL" # HTTP="true" $hostname_conndb = "localhost"; $database_conndb = "project"; $username_conndb = "root"; $password_conndb = ""; $conndb = mysql_pconnect($hostname_conndb, $username_conndb, $password_conndb) or trigger_error(mysql_error(),E_USER_ERROR); ?> 4.3 Halaman BackEnd Gambar 4.1 Halaman BackEnd Halaman ini terdapat pada folder admin di dalam folder project. Untuk mengakses halaman ini, maka pada browser harus menambahkan /admin dari root project (http://localhost/projectWeb/admin). Pada halaman backend ini, terdapat halaman Dashboard, Add News, Admin, Add Admin, dan Homepage, tetapi halaman tersebut tidak akan bisa di akses jika tidak login pada login page, jika mencoba dengan paksa mengakses halaman-halaman diatas, maka akan tetap di redirect ke login page (login.php). Jika username dan password tidak sesuai dengan data yang terdapat di database, maka akan di redirect ke login-failed.php. 21 Gambar 4.2 Halaman login-failed.php Function pada login page : <?php // *** Validate request to login to this site. if (!isset($_SESSION)) { session_start(); } $loginFormAction = $_SERVER['PHP_SELF']; if (isset($_GET['accesscheck'])) { $_SESSION['PrevUrl'] = $_GET['accesscheck']; } if (isset($_POST['username'])) { $loginUsername=$_POST['username']; $password=$_POST['password']; $MM_fldUserAuthorization = ""; $MM_redirectLoginSuccess = "index.php"; $MM_redirectLoginFailed = "login-failed.php"; $MM_redirecttoReferrer = false; mysql_select_db($database_conndb, $conndb); $LoginRS__query=sprintf("SELECT username, password FROM users WHERE username=%s AND password=%s", GetSQLValueString($loginUsername, "text"), GetSQLValueString($password, "text")); $LoginRS = mysql_query($LoginRS__query, $conndb) or die(mysql_error()); $loginFoundUser = mysql_num_rows($LoginRS); if ($loginFoundUser) { $loginStrGroup = ""; if (PHP_VERSION >= 5.1) {session_regenerate_id(true);} else {session_regenerate_id();} //Declare session for CKEDITOR and KCFINDER $_SESSION['KCFINDER']=array(); $_SESSION['KCFINDER']['disabled'] = false; $_SESSION['KCFINDER']['uploadURL'] = '../../upload'; $_SESSION['KCFINDER']['uploadDir'] = '../../upload'; //declare two session variables and assign them $_SESSION['MM_Username'] = $loginUsername; $_SESSION['MM_UserGroup'] = $loginStrGroup; if (isset($_SESSION['PrevUrl']) && false) { $MM_redirectLoginSuccess = $_SESSION['PrevUrl']; } header("Location: " . $MM_redirectLoginSuccess ); } else { header("Location: ". $MM_redirectLoginFailed ); } } ?> 22 4.3.1 Halaman Dasboard Jika telah berhasil login, akan di redirect ke halaman dashboard (index.php), di halaman ini terdapat seluruh news atau article yang ada, dan dihalaman ini dapat meng-edit dan men-delete article tersebut. Gambar 4.3 Halaman Dashboard (index.php) 4.3.2 Halaman Edit News Jika pada halaman dashboard (index.php), anda memilih edit pada salah satu article, maka akan di redirect ke halaman edit-news.php, di halaman ini anda dapat meng-edit article dan dapat menyimpannya kembali. Pada halaman Edit News, terlihat bahwa alamat pada browser yaitu http://localhost/projectweb/admin/edit-news.php?edit=16, edit=16 ini adalah ID untuk news atau article yang akan di edit sesuai dengan yang ada di database, jika memilih news atau article yang lain, maka tentu ID yang di pilih juga akan berbeda. 23 Gambar 4.4 Halaman Edit News (edit-news.php) 4.3.3 Halaman Confirm Delete News Jika pada halaman dashboard (index.php), anda memilih delete pada suatu article, maka anda akan di redirect ke halaman delete-news-confirm.php, di halaman ini, anda diminta untuk mengkonfirmasi apakah anda ingin men-delete article ini atau tidak, jika anda memilih YES, maka article yang anda pilih akan terhapus dari database dan di redirect ke halaman dashboard (index.php) , tetapi jika anda memilih NO, maka anda akan di redirect ke halaman dashboard (index.php) dan article yang anda pilih tidak akan terhapus dari database. Pada halaman Confirm Delete News, terlihat bahwa alamat pada browser yaitu http://localhost/projectweb/admin/delete-news-confirm.php?delete=16, edit=16 ini adalah ID untuk news atau article yang akan di delete sesuai dengan yang ada di database, jika memilih news atau article yang lain, maka tentu ID yang di pilih juga akan berbeda. 24 Gambar 4.5 Halaman Confirm Delete News (delete-news-confirm.php) 4.3.4 Halaman Add News Pada halaman add news, anda dapat membuat article baru yang nanti akan disimpan di dalam database. Di halaman ini terdapat text field untuk Title, Dropdown untuk Category, dan Text area untuk Content yang telah di integrasikan dengan CKeditor dan KCfinder. Jika di submit, value yang terdapat dalam text field Title akan di input ke dalam field title dalam table post, value yang terdapat didalam dropdown Category akan di input kedalam field category dalam table post dan value yang terdapat didalam text area Content akan di input ke dalam field content dalam table post. 25 Gambar 4.6 Halaman Add News (add-news.php) 4.3.5 Halaman Admin Pada halaman admin terdapat keseluruhan user yang terdapat di dalam database, dihalaman ini juga anda dapat meng-edit dan men-delete user tersebut. Gambar 4.7 Halaman Admin (admin.php) 26 4.3.6 Halaman Edit Admin Jika pada halaman admin (admin.php), anda memilih edit pada salah satu user, maka akan di redirect ke halaman edit-admin.php, di halaman ini anda dapat meng-edit user dan dapat menyimpannya kembali. Pada halaman Edit Admin, terlihat bahwa alamat pada browser yaitu http://localhost/projectWeb/admin/edit-admin.php?edit=1, edit=1 ini adalah ID untuk user yang akan di edit sesuai dengan yang ada di database, jika memilih user yang lain, maka tentu ID yang di pilih juga akan berbeda. Gambar 4.8 Halaman Edit Admin (edit-admin.php) 4.3.7 Halaman Confirm Delete Admin Jika pada halaman admin (admin.php), anda memilih delete suatu user, maka anda akan di redirect ke halaman delete-admin-confirm.php, di halaman ini, anda diminta untuk mengkonfirmasi apakah anda ingin men-delete user ini atau tidak, jika anda memilih YES, maka user yang anda pilih akan terhapus dari database dan di redirect ke halaman admin (admin.php) , tetapi jika anda memilih NO, maka anda akan di redirect ke halaman dashboard (admin.php) dan user yang anda pilih tidak akan terhapus dari database. Pada halaman Confirm Delete Admin, terlihat bahwa alamat pada browser yaitu http://localhost/projectWeb/admin/delete-admin-confirm.php?delete=1, edit=1 ini adalah ID untuk user yang akan di delete sesuai dengan yang ada di 27 database, jika memilih user yang lain, maka tentu ID yang di pilih juga akan berbeda. Gambar 4.9 Halaman Confirm Delete Admin (delete-admin-confirm.php) 4.4 Halaman FrontEnd Halaman FrontEnd (http://localhost/projectweb/). ini Pada dapat diakses halaman melalui FrontEnd, root terdapat project halaman Software, Hardware dan Gadget. Pada halaman ini ditampilkan semua news atau article semua category di dalam database. Pada halaman ini hanya ditampilkan 3 article, dan terdapat page navigation untuk melihat article selanjutnya. Pada halaman ini, article tidak seluruhnya di tampilkan, tetapi hanya sebagian saja, jika ingin melihat keseluruhan article, maka harus meng-klik judul dari article atau readmore dari article tersebut. Pada masing-masing judul article, terdapat hyperlink dan readmore untuk melihat keseluruhan dari article. Jika meng-klik judul atau readmore, akan di redirect ke halaman view.php, pada browser akan menghasilkan alamat (contoh: http://localhost/projectweb/article.php?view=16), view=16 disini maksudnya adalah ID dari article tersebut yang tersimpan di dalam database, jadi pada halaman article.php, akan di tampilkan isi article sesuai dengan ID yang terdapat di dalam database. 28 Gambar 4.10 Halaman FrontEnd (index.php) 4.4.1 Halaman Software Pada halaman ini, terdapat semua article dengan category software (category dipilih pada saat add news). Di halaman ini, hanya di tampilkan 3 article dan terdapat page navigation untuk melihat article selanjutnya. Aturan setiap article sama dengan article pada halaman homepage (index.php). Gambar 4.11 Halaman Software (software.php) 29 4.4.2 Halaman Hardware Pada halaman ini, terdapat semua article dengan category hardware (category dipilih pada saat add news). Di halaman ini, hanya di tampilkan 3 article dan terdapat page navigation untuk melihat article selanjutnya. Aturan setiap article sama dengan article pada halaman homepage (index.php). Gambar 4.12 Halaman Hardware (hardware.php) 4.4.3 Halaman Gadget Pada halaman ini, terdapat semua article dengan category gadget (category dipilih pada saat add news). Di halaman ini, hanya di tampilkan 3 article dan terdapat page navigation untuk melihat article selanjutnya. Aturan setiap article sama dengan article pada halaman homepage (index.php). 30 Gambar 4.13 Halaman Gadget (gadget.php) BAB V PENUTUP 5.1 KESIMPULAN Aplikasi Web Top In Tech ini adalah aplikasi web CMS berbasis PHP dan MySQL. Aplikasi web ini terbagi menjadi 2 bagian, yaitu BackEnd dan FrontEnd. Halaman BackEnd berfungsi untuk memanajemen article (add, edit, dan delete). Halaman FrontEnd berfungsi untuk menampilkan article yang sudah tersimpan di dalam database melalui halaman BackEnd. Secara garis besar, Aplikasi web ini bertujuan untuk mereview hardware, software dan gadget agar pembaca dapat mengetahui kekurangan, kelebihan dan spesifikasi dari suatu item. 5.2 SARAN Saran Aplikasi Web Top In Tech ini masih memungkinkan untuk di kembangkan lebih jauh, seperti menambahkan lebih banyak category, dan dapat add, edit dan delete category dari halaman BackEnd, dan secara otomatis category tersebut di tampilkan di halaman FrontEnd. Dan juga Aplikasi Web Top In Tech ini memungkinkan untuk ditambahkan fitur komentar, jadi setiap pembaca atau pengunjung dapat memberikan komentarnya pada setiap article. 31 DAFTAR PUSTAKA [1] Ebook : Suhermanto, 2010. Belajar Membuat CMS [2] Ebook : Nugroho, 2010. Dasar Website PHP-MySQL dengan Editor Dreamweaver [3] Java Web Media, 2012. Membuat CMS PHP MySQL Menggunakan Dreamweaver CS5, CS4, CS3, [ONLINE], Available : http://javawebmedia.com/blog/ 32