Web Document Project

advertisement
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
Download